How to prevent ENTER keypress to submit a web form?

How to prevent ENTER keypress to submit a web form?

How do you prevent an ENTER key press from submitting a form in a web-based application?

Solutions/Answers:

Solution 1:

[revision 2012, no inline handler, preserve textarea enter handling]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Now you can define a keypress handler on the form:
<form […] onkeypress=”return checkEnter(event)”>

document.querySelector('form').onkeypress = checkEnter;

Solution 2:

Here is a jQuery handler that can be used to stop enter submits, and also stop backspace key -> back. The (keyCode: selectorString) pairs in the “keyStop” object are used to match nodes that shouldn’t fire their default action.

Remember that the web should be an accessible place, and this is breaking keyboard users’ expectations. That said, in my case the web application I am working on doesn’t like the back button anyway, so disabling its key shortcut is OK. The “should enter -> submit” discussion is important, but not related to the actual question asked.

Related:  remove extra spaces in string javascript

Here is the code, up to you to think about accessibility and why you would actually want to do this!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});

Solution 3:

Simply return false from the onsubmit handler

<form onsubmit="return false;">

or if you want a handler in the middle

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">

Solution 4:

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});

Solution 5:

You will have to call this function whic will just cancel the default submit behaviour of the form. You can attach it to any input field or event.

function doNothing() {  
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}

Solution 6:

The ENTER key merely activates the form’s default submit button, which will be the first

<input type="submit" />

the browser finds within the form.

Related:  Is it possible to do mathematics inside CSS?

Therefore don’t have a submit button, but something like

<input type="button" value="Submit" onclick="submitform()" /> 

EDIT: In response to discussion in comments:

This doesn’t work if you have only one text field – but it may be that is the desired behaviour in that case.

The other issue is that this relies on Javascript to submit the form. This may be a problem from an accessibility point of view. This can be solved by writing the <input type='button'/> with javascript, and then put an <input type='submit' /> within a <noscript> tag. The drawback of this approach is that for javascript-disabled browsers you will then have form submissions on ENTER. It is up to the OP to decide what is the desired behaviour in this case.

I know of no way of doing this without invoking javascript at all.