Sunday, 18 January 2009

Disabling Enter Causing Submit with jQuery


Recently I was asked to disable the submit event being triggered when the enter key is hit in a textbox input. This is for an ASP.NET MVC application. That means that including this in the site.master will allow identical behaviour across the entire web application.

When you hit enter, the focus will move to the next textbox.

There is also browser sensing code since Firefox needs a different event bound.


jQuery(document).ready(function($) {
   textboxes = $("input:text");

   if ($.browser.mozilla) {
      $(textboxes).keypress(checkForEnter);
   } else {
      $(textboxes).keydown(checkForEnter);
   }

   function checkForEnter(event) {
      if (event.keyCode == 13) {
         currentTextboxNumber = textboxes.index(this);

         if (textboxes[currentTextboxNumber + 1] != null) {
           nextTextbox = textboxes[currentTextboxNumber + 1];
           nextTextbox.select();
      }

         event.preventDefault();
         return false;
      }
   }
});

13 comments:

David Keaveny said...

I don't know about you, but it would be fingernails on a chalkboard to my soul to change such a standard UI convention. Surely by now people are used to using the Tab key to, um, tab between fields, and then Enter key to, um, enter the form. Except of course on Firefox for Mac, where only text fields can be Tabbed to, dropdowns and radio-/check-buttons cannot. UI fail right there too!

Out of interest, what have they asked that the Tab key do instead?

Mana said...

I hear you but they wanted it so I implemented it.

Sometimes it's better to lose the small battles and leave the winning for the ones that matter.

David Keaveny said...

Oh I quite agree; the customer wants, the customer gets (as long as it's not too bad for them!)

Wiggy said...

I wonder though if this would be an obstacle to blind users of the system?

Mana said...

Yes, they wanted it taken out in the end. Sometimes you have to show people before they realise it's not a good idea.

Cogswell said...

any idea how to also disable enter on the radio buttons?

Thanks! awesome script

Preto said...

thanks...works fine in my case!

Preto said...

thanks...works fine in my case!

sarajchipps said...

you rock! thanks, totally stole this.

Kalle said...

I tried this and it works great for the enter key. However, it disabled all other key so it is e.g. impossible to type text into a text box or bringing up the browser menu by pressing the ALT key.How can I change the behaviour for the ENTER key only and leave all others intact?

Thanks

David said...

Alternative....

$(document).ready(function() {
$('#myFormID').find('input:text').bind('keypress', function(e) {
if (e.which == 13) {
return false;
}
});
});

LP Papillon said...

This was useful to me, thanks.
For the folks whining this is a bad idea for UI design, etc, keep in mind there are legitimate reasons for implementing this. For instance we are designing an in-house system and the end-user will be using a scanner to scan a multitude of barcodes into our system. The scanner sends and ENTER after each barcode. This prevents the form from submitting after each one and takes it a step further allowing me to scan the next barcode right away.

bullymuk said...

This was exactly what I was looking for. It was and is the safest way to asure that a user is ready to submit the form!