Prevent form submission on Enter key press

by 
if(characterCode == 13) {
    // returning false will prevent the event from bubbling up.
    return false; 
} else{
    return true;
}

Ok, so imagine you have the following textbox in a form:

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

In order to run some “user defined” script from this text box when the enter key is pressed, and not have it submit the form, here is some sample code. Please note that this function doesn’t do any error checking and most likely will only work in IE. To do this right you need a more robust solution, but you will get the general idea.

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

returning the value of the function will alert the event handler not to bubble the event any further, and will prevent the keypress event from being handled further.

NOTE:

It’s been pointed out that keyCode is now deprecated. The next best alternative which has also been deprecated.

Unfortunately the favored standard key, which is widely supported by modern browsers, has some dodgy behavior in IE and Edge. Anything older than IE11 would still need a polyfill.

Furthermore, while the deprecated warning is quite ominous about keyCode and which, removing those would represent a massive breaking change to untold numbers of legacy websites. For that reason, it is unlikely they are going anywhere anytime soon.

More Related Contents:

  1. How to find out what character key is pressed?
  2. How do I capture response of form.submit
  3. HTML input file selection event not firing upon selecting the same file
  4. How to capture Enter key press? [duplicate]
  5. Submit form on Enter key with javascript
  6. Stop form refreshing page on submit
  7. Detect Click into Iframe using JavaScript
  8. How to find out which JavaScript events fired?
  9. How to avoid the need for ctrl-click in a multi-select box using Javascript?
  10. How do I programmatically click on an element in JavaScript?
  11. On Text Highlight Event?
  12. Submit form on pressing Enter with AngularJS
  13. Prevent onmouseout when hovering child element of the parent absolute div WITHOUT jQuery
  14. Is there a JavaScript MVC (micro-)framework? [closed]
  15. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  16. Perform action when clicking HTML5 datalist option
  17. How can I get jQuery .val() AFTER keypress event?
  18. How to use JavaScript to fill a form on another page
  19. How to Clear/Remove JavaScript Event Handler?
  20. How do I capture a key press (or keydown) event on a div element?
  21. Popstate on page’s load in Chrome
  22. How do I pass the this context into an event handler?
  23. How do I listen for triple clicks in JavaScript?
  24. Fire oninput event with jQuery
  25. copying the value of a form’s file input field to another form’s input field
  26. Handle refresh page event with JavaScript
  27. Is triggering event listeners using “.click()” asynchronous?
  28. How to to initialize keyboard event with given char/keycode in a Chrome extension?
  29. What is the difference between Event.target, Event.toElement and Event.srcElement?
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment