JavaScript listener keypress doesn t detect backspace

Question

I m using a keypress listener eg     addEventListener  keypress   function event        However  this doesn t seem to detect a backspace which erases text      Is there a different listener I can use to detect this

User · Answer

KeyPress event is invoked only for character (printable) keys, KeyDown event is raised for all including nonprintable such as Control, Shift, Alt, BackSpace, etc.

UPDATE:

The keypress event is fired when a key is pressed down and that key normally produces a character value

Reference.

User · Answer

The keypress event might be different across browsers    I created a Jsfiddle to compare keyboard events  using the JQuery shortcuts  on Chrome and Firefox  Depending on the browser you re using a keypress event will be triggered or not -- backspace will trigger keydown keypress keyup on Firefox but only keydown keyup on Chrome   Single keyclick events triggered  on Chrome   keydown keypress keyup when browser registers a keyboard input  keypress is fired  keydown keyup if no keyboard input  tested with alt  shift  backspace  arrow keys  keydown only for tab    on Firefox   keydown keypress keyup when browser  registers a keyboard input but also for backspace  arrow keys  tab  so here keypress is fired even with no input  keydown keyup for alt  shift     This shouldn t be surprising because according to https   api jquery com keypress       Note  as the keypress event isn t covered by any official   specification  the actual behavior encountered when using it may   differ across browsers  browser versions  and platforms    The use of the keypress event type is deprecated by W3C  http   www w3 org TR DOM-Level-3-Events  event-type-keypress      The keypress event type is defined in this specification for reference   and completeness  but this specification deprecates the use of this   event type  When in editing contexts  authors can subscribe to the   beforeinput event instead      Finally  to answer your question  you should use keyup or keydown to detect a backspace across Firefox and Chrome     Try it out on here    x000D   x000D      inputTxt   bind  keypress keyup keydown   function  event    x000D      var evtType   event type  x000D      var eWhich   event which  x000D      var echarCode   event charCode  x000D      var ekeyCode   event keyCode  x000D   x000D      switch  evtType    x000D          case  keypress   x000D                  log   html     log   html       lt b gt     evtType     lt  b gt       keycode      ekeyCode     charcode      echarCode     which      eWhich     lt br gt     x000D              break  x000D          case  keyup   x000D                  log   html     log   html       lt b gt     evtType     lt  b gt       keycode      ekeyCode     charcode      echarCode     which      eWhich     lt p gt     x000D              break  x000D          case  keydown   x000D                  log   html     log   html       lt b gt     evtType     lt  b gt       keycode      ekeyCode     charcode      echarCode     which      eWhich     lt br gt     x000D              break  x000D          default  x000D              break  x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt input class  inputTxt  type  text    gt  x000D   lt div id  log  gt  lt  div gt  x000D   x000D   x000D

User · Answer

event key      quot Backspace quot  More recent and much cleaner  use event key  No more arbitrary number codes  note addEventListener  keydown   function event        const key   event key     const  key    event  ES6      if  key      quot Backspace quot                Do something            Mozilla Docs Supported Browsers

User · Answer

Something I wrote up incase anyone comes across an issue with people hitting backspace while thinking they are in a form field  window addEventListener  keydown   function e                 keyCode  8        keyIdentifier   U 0008             if e keyCode     8  amp  amp  document activeElement      text             e preventDefault            alert  Prevent page from going back

User · Answer

Try keydown instead of keypress   The keyboard events occur in this order  keydown  keyup  keypress  The problem with backspace probably is  that the browser will navigate back on keyup and thus your page will not see the keypress event

User · Answer

Use one of keyup   keydown   beforeinput events instead    based on this reference  keypress is deprecated and no longer recommended       The keypress event is fired when a key that produces a character value   is pressed down  Examples of keys that produce a character value are   alphabetic  numeric  and punctuation keys  Examples of keys that don t   produce a character value are modifier keys such as Alt  Shift  Ctrl    or Meta    if you use  beforeinput  be careful about it s Browser compatibility  the difference between  beforeinput  and the other two is that  beforeinput  is fired when input value is about to changed  so with characters that can t change the input value  it is not fired  e g shift  ctr  alt    I had the same problem and by using keyup it was solved

User · Answer

My numeric control   function CheckNumeric event        var  key    window Event    event which   event keyCode      if   key  gt  95  amp  amp   key  lt  106            return true            else if   key  gt  47  amp  amp   key  lt  58            return true            else           return false            lt input type  text  onkeydown  return CheckNumerick event      gt    try it  BackSpace key code is 8

[javascript] JavaScript listener, "keypress" doesn't detect backspace?

Examples related to javascript

Examples related to keypress

Examples related to addeventlistener