Disable form submission via Enter key on only _some fields

Question

I want to retain the conventional 'form submits when i press Enter' behavior because users are familiar with. But by reflex, they often hit enter when they finish with a text input box - but before they are actually done with the complete form.

I'd like to hijack the Enter key only when then focus is on a certain class of input.

Looking Related Questions this looks like what I'm looking for:

if (document.addEventListener) {
    document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
    document.getElementById('strip').onkeypress = HandleKeyPress;
}

but the if (document.addEventListener) { part is unfamiliar to me.

That is called feature detection. If the browser uses the `addEventListener()` syntax for adding event listeners, there will be a function object called `addEventListener` in every DOM node object (and specifically, in the document object). A function object becomes true when converted to a boolean, so the first branch runs. If the browser does not understand the addEventListener syntax, `document.addEventListener` will be undefined (which converts to false) and the fallback code in the second branch gets executed. — Tgr, May 08 '10 at 12:34

Nick Craver · Accepted Answer · 2010-05-08T12:31:23.820

140

You can capture and cancel the enter keypress on those fields like this:

$('.noEnterSubmit').keypress(function(e){
    if ( e.which == 13 ) return false;
    //or...
    if ( e.which == 13 ) e.preventDefault();
});

Then on your inputs just give them a class="noEnterSubmit" :)

Looking ahead in case others find this later, in jQuery 1.4.3 (not out yet) you can shorten it to this:

$('.noEnterSubmit').bind('keypress', false);

edited May 08 '10 at 12:31

answered May 08 '10 at 12:24

Nick Craver

623,446
136
1,297
1,155

51

You also need to bear in mind that `bind('keypress', false);` will _prohibit all data entry_. So if you want to apply this to text input elements, use the first solution – hohner Feb 10 '12 at 22:58
4

If you're using dynamic fields you should change this to `$('body').on('keypress', '.noEnterSubmit', function(){ ... });` – seangates Feb 28 '14 at 01:56
3

Using a class is not appropriate for semantic controlling. Better use data-nosubmit or similar HTML 5 data attribute for same. $('[data-nosubmit]') is the selector, then. – Joerg Krause Oct 20 '14 at 09:35
3

@JoergKrause that's entirely subjective - we use js-className and it works just fine, it's up to the developer. Class names also work (and work fast - native selector engine) in older browsers and are html4 valid (not that data attributes *actually* break html4). – Nick Craver Oct 20 '14 at 14:58

score 14 · Answer 2 · answered May 01 '18 at 10:58

14

 <input type="text"  onkeydown="return (event.keyCode!=13);" />

answered May 01 '18 at 10:58

stackuser

168
2
6
15

Wow! This one worked for me. I'm using an `asp:TextBox` with `AutoPostback="True"` in an `UpdatePanel`. I needed to disable the postback on the enter key because the `AutoPostback` and the Enter key were both firing the `TextChanged` event. So in short I needed a way to stop the enter key on one button only, without overriding the postback. This worked perfectly! +1 – Hawkeye Aug 31 '18 at 20:50
Perfect clean way to do it! yet it gave me the warning "Deprecated symbol used, consult docs for better alternative" – YoomarXD Nov 11 '20 at 18:42

score 4 · Answer 3 · answered May 27 '13 at 11:57

Just add following code in <Head> Tag in your HTML Code. It will Form submission on Enter Key For all fields on form

<script type="text/javascript">
    function stopEnterKey(evt) {
        var evt = (evt) ? evt : ((event) ? event : null);
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
        if ((evt.keyCode == 13) && (node.type == "text")) { return false; }
    }
    document.onkeypress = stopEnterKey;
</script>

score 3 · Answer 4 · answered Apr 02 '13 at 04:58

To allow enter only on a specific class (in this example, 'enterSubmit'):

jQuery(document).ready(function(){
    jQuery('input').keypress(function(event){
        var enterOkClass =  jQuery(this).attr('class');
        if (event.which == 13 && enterOkClass != 'enterSubmit') {
            event.preventDefault();
            return false;   
        }
    });
});

Disable form submission via Enter key on only _some fields

4 Answers4

Linked