How to prevent ENTER keypress to submit a web form?

Question

I just want to know how to prevent a 'ENTER' key pressed to submit a form in a web based application. I need a detailed answer.

Answer 1

You can trap the keydown on a form in javascript and prevent the even bubbling, I think. ENTER on a webpage basically just submits the form that the currently selected control is placed in.

Answer 2

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.

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.

Answer 3

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();
 }
}

Answer 4

function checkEnter(e){
 e = e || event;
 return (e.keyCode || event.which || event.charCode || 0) !== 13;
}

Now you can define a keypress handler on the form:

<form [...] onkeypress="return checkEnter(event)">

(tested in FF3, IE7, Chrome)

Answer 5

nice post thanks you

Answer 6

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()">

Answer 7

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 accessable 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.

Here is the code, up to you to think about accessability 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;
 });
});

Answer 8

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }
  }
  return false;
}

Then on your form:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">