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:
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?
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.
Oh I quite agree; the customer wants, the customer gets (as long as it's not too bad for them!)
I wonder though if this would be an obstacle to blind users of the system?
Yes, they wanted it taken out in the end. Sometimes you have to show people before they realise it's not a good idea.
any idea how to also disable enter on the radio buttons?
Thanks! awesome script
thanks...works fine in my case!
thanks...works fine in my case!
you rock! thanks, totally stole this.
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
Alternative....
$(document).ready(function() {
$('#myFormID').find('input:text').bind('keypress', function(e) {
if (e.which == 13) {
return false;
}
});
});
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.
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!
Post a Comment