Prevent form submission on Enter key press

Question

I have a form with two text boxes  one select drop down and one radio button  When the enter key is pressed  I want to call my JavaScript function  but when I press it  the form is submitted  How do I prevent the form from being submitted when the enter key is pressed

User · Answer

Cross Browser Solution

Some older browsers implemented keydown events in a non-standard way.

KeyBoardEvent.key is the way it is supposed to be implemented in modern browsers.

which and keyCode are deprecated nowadays, but it doesn't hurt to check for these events nonetheless so that the code works for users that still use older browsers like IE.

The isKeyPressed function checks if the pressed key was enter and event.preventDefault() hinders the form from submitting.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Minimal working example

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

User · Answer

Detect Enter key pressed on whole document     document  keypress function  e        if  e which    13            alert  enter key is pressed                http   jsfiddle net umerqureshi dcjsa08n 3

User · Answer

So maybe the best solution to cover as many browsers as possible and be future proof would be   if  event which     13    event keyCode     13    event key      Enter

User · Answer

Using TypeScript  and avoid multiples calls on the function  let el1   lt HTMLInputElement gt document getElementById  searchUser    el1 onkeypress   SearchListEnter   function SearchListEnter event  KeyboardEvent        if  event which     13            return               more stuff

User · Answer

Here is how you can do it using JavaScript   x000D   x000D    in your   popup js   file just use this function       var input   document getElementById  textSearch        input addEventListener  keyup   function event            event preventDefault            if  event keyCode     13                alert  yes it works I m happy                       x000D   lt  --Let s say this is your html file-- gt    lt  DOCTYPE html gt       lt html gt         lt body style  width  500px  gt           lt input placeholder  Enter the text and press enter  type  text  id  textSearch   gt              lt script type  text javascript  src  public js popup js  gt  lt  script gt         lt  body gt       lt  html gt  x000D   x000D   x000D

User · Answer

native js  fetch api    x000D   x000D  document onload         gt    x000D      alert  ok    x000D      let keyListener   document querySelector   searchUser    x000D          x000D      keyListener addEventListener  keypress    e    gt    x000D          if e keyCode     13   x000D              let username   e target value  x000D              console log  username     username     x000D              fetch  https   api github com users   username     x000D                  data    x000D                      client id   xxx   x000D                      client secret   xxx  x000D                    x000D                 x000D               then  user   gt   x000D                  console log  user     user     x000D                  x000D              fetch  https   api github com users   username  repos    x000D                  data    x000D                      client id   xxx   x000D                      client secret   xxx  x000D                    x000D                 x000D               then  repos   gt   x000D                  console log  repos     repos     x000D                  for  let i   0  i  lt  repos length  i      x000D                       console log  repos   i       repos i      x000D                    x000D                  x000D           else  x000D              console log  e keyCode     e keyCode     x000D            x000D          x000D        x000D   lt input  ngcontent-inf-0    class  form-control  id  searchUser  placeholder  Github username     type  text  gt  x000D   x000D   x000D

User · Answer

event key      quot Enter quot  More recent and much cleaner  use event key  No more arbitrary number codes   NOTE  The old properties   keyCode and  which  are Deprecated   const node   document getElementsByClassName  quot mySelect quot   0   node addEventListener  quot keydown quot   function event        if  event key      quot Enter quot             event preventDefault               Do more work            Modern style  with lambda and destructuring node addEventListener  quot keydown quot     key     gt        if  key      quot Enter quot      Handle press     Mozilla Docs Supported Browsers

User · Answer

Override the onsubmit action of the form to be a call to your function and add return false after it  ie    lt form onsubmit  javascript myfunc   return false    gt

User · Answer

Use event preventDefault   inside user defined function  lt form onsubmit  quot userFunction event  quot  gt        x000D   x000D  function userFunction ev         if  event target send checked                 console log  form NOT submit on  Enter  key            ev preventDefault            x000D  Open chrome console gt  network tab to see  lt form onsubmit  userFunction event   action   test txt  gt     lt input placeholder  type and press Enter    gt  lt br gt     lt input type  checkbox  name  send    gt  submit on enter  lt  form gt  x000D   x000D   x000D

User · Answer

A jQuery solution   I came here looking for a way to delay the form submission until after the blur event on the text input had been fired     selector  keyup function e             Delay the enter key form submit till after the hidden      input is updated              No need to do anything if it s not the enter key      Also only e which is needed as this is the jQuery event object    if  e which     13           return            Prevent form submit   e preventDefault          Trigger the blur event    this blur          Submit the form      e target  closest  form   submit          Would be nice to get a more general version that fired all the delayed events rather than just the form submit

User · Answer

if characterCode    13        return false     returning false will prevent the event from bubbling up    else       return true      Ok  so imagine you have the following textbox in a form    lt input id  scriptBox  type  text  onkeypress  return runScript event     gt    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

User · Answer

A react js solution   handleChange  function e        if  e key     Enter           console log  test              lt div gt       lt Input type  text         ref    input         placeholder  hiya         onKeyPress  this handleChange        gt    lt  div gt

User · Answer

A little simple Don t send the form on keypress  quot Enter quot    lt form id  quot form cdb quot  onsubmit  quot return false quot  gt   Execute the function on keypress  quot Enter quot    lt input type  quot text quot  autocomplete  quot off quot  onkeypress  quot if event key      Enter   my event   quot  gt

User · Answer

Use both event which and event keyCode   function  event        if  event which    13    event keyCode    13              code to execute here         return false            return true

User · Answer

lt form id  form1  runat  server  onkeypress  return event keyCode    13   gt    Add this Code In Your HTML Page   it will disable    Enter Button

User · Answer

A much simpler and effective way from my perspective should be     function onPress ENTER             var keyPressed   event keyCode    event which             if ENTER is pressed         if keyPressed  13                        alert  enter pressed                keyPressed null                    else                       return false

User · Answer

Below code will add listener for ENTER key on entire page   This can be very useful in screens with single Action button eg Login  Register  Submit etc       lt head gt           lt  --Import jQuery IMPORTANT -- gt           lt script src  https   code jquery com jquery-2 1 1 min js  gt  lt  script gt             lt  --Listen to Enter key event-- gt           lt script type  text javascript  gt                 document  keypress function  e                    if  e which    13    event keyCode    13                        alert  enter key is pressed                                               lt  script gt       lt  head gt    Tested on all browsers

User · Answer

lt div class  nav-search  id  nav-search  gt           lt form class  form-search  gt               lt span class  input-icon  gt                   lt input type  text  placeholder  Search      class  nav-search-input  id  search value  autocomplete  off    gt                   lt i class  ace-icon fa fa-search nav-search-icon  gt  lt  i gt               lt  span gt               lt input type  button  id  search  value  Search  class  btn btn-xs  style  border-radius  5px   gt           lt  form gt    lt  div gt    lt script type  text javascript  gt          search value   on  keydown   function e            if  e which    13                     search   trigger  click                return false                            search   on  click  function            alert  You press enter             lt  script gt

User · Answer

If you re using jQuery      input type text    on  keydown   function e        if  e which    13            e preventDefault

[javascript] Prevent form submission on Enter key press

Cross Browser Solution

Minimal working example

Examples related to javascript

Examples related to forms

Examples related to keypress

Examples related to dom-events

Examples related to enter