Stop keypress event

Question

How to stop keypress event in keydown.

I have a keydown handler in that I need to stop keypress event.

Actually I have a form and textbox in it.

When user press enter key, keydown is triggering the event and having the handler.

Form submit will triggered be in keypress, so I need to stop the keypress event in my keydown handler.

Solution 1

function onKeyDown(event) {   
  event.preventDefault();
}

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault

or

function onsubmit(event) {
  return false;
}

return false to stop events propagation

Solution 2

Here I stopped the event bubbling for up/dn/left/right keys:

    $(document).on("keydown", function(e) {
        if(e.keyCode >= 37 && e.keyCode <= 40) {
            e.stopImmediatePropagation();
            return;
        }
    });

I also tried e.preventDefault or event.cancelBubble = true from the answers above, but they had no impact.

Solution 3

In opera, you have to use the keypress event to prevent the default actions for keyboard events. keydown works to prevent default action in all browsers but not in opera.

See this long list of inconsistencies in keyboard handling across browsers.

Solution 4

Try event.cancelBubble = true in event handler.

Solution 5

Write,

    <script type="text/javascript">
      function keyDn(obj)
      {
        if(window["event"]["keyCode"]==48)  // key 0 will disabled keyPress event
         {
           obj["onkeypress"]=null;
          }
       }
      function keyPs(obj)
      {
        alert("Keypress");
      }

    </script>

  <form id="form1" runat="server">
    <div>
     <input type="text" onkeydown="keyDn(this)" onkeypress="keyPs(this)" />
    </div>
  </form>

in keydown handler.

View more solutions

Comments

[andho]

var suppressEvent = false; function onKeyDown(event) { suppressEvent = true; event.preventDefault(); } function onKeyPress(event) { if (suppressEvent) event.preventDefault(); }

[JohannesB]

I know this is a very old thread, but as your question is still not answered, I will. In fact I recently found a working workaround for the problem you specified: You make your form return false onsubmit and hide and disable your submit button. Then you create a second button (which is not of the type submit) which infact will remove the return false property of the onsubmit event and removes the disable of the button aswell. After that you use this button to simulate the click event on the real submit button. You can find a working example here: jsfiddle.net/rsauxil/qyf8L/6 .

[Chris - Jr]

Thank you so much @john. This helped me with an issue I was having where my custom event handler caused the enter key to move to the cell below in an html table AND was adding an unnecessary extra new line in that new cell. I just needed to cancel the default event of the enter key.

[Donald Duck]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

[ashleedawg]

keyPress is now obsolete.