onKeyPress Vs onKeyUp and onKeyDown

Question

What is the difference between these three events  Upon googling I found that         The onKeyDown event is triggered when the user presses a key    The onKeyUp event is triggered when the user releases a key    The onKeyPress event is triggered when the user presses  amp  releases a key    onKeyDown followed by onKeyUp        I understand the first two  but isn t onKeyPress the same as onKeyUp  Is it possible to release a key  onKeyUp  without pressing it  onKeyDown    This is a bit confusing  can someone clear this up for me

User · Answer

Basically  these events act differently on different browser type and version  I created a little jsBin test and you can check the console for find out how these events behavior for your targeted environment  hope this help  http   jsbin com zipivadu 10 edit

User · Answer

This article by  Jan Wolter is the best piece I have came across  you can find the archived copy here if link is dead  It explains all browser key events really well   The keydown event occurs when the key is pressed  followed immediately by the keypress event  Then the keyup event is generated when the key is released  To understand the difference between keydown and keypress  it is useful to distinguish between characters and keys  A key is a physical button on the computer s keyboard  A character is a symbol typed by pressing a button  On a US keyboard  hitting the 4 key while holding down the Shift key typically produces a  quot dollar sign quot  character  This is not necessarily the case on every keyboard in the world  In theory  the keydown and keyup events represent keys being pressed or released  while the keypress event represents a character being typed  In practice  this is not always the way it is implemented  For a while  some browers fired an additional event  called textInput  immediately after keypress  Early versions of the DOM 3 standard intended this as a replacement for the keypress event  but the whole notion was later revoked  Webkit supported this between versions 525 and 533  and I m told IE supported it  but I never detected that  possibly because Webkit required it to be called textInput while IE called it textinput  There is also an event called input  supported by all browsers  which is fired just after a change is made to to a textarea or input field  Typically keypress will fire  then the typed character will appear in the text area  then input will fire  The input event doesn t actually give any information about what key was typed - you d have to inspect the textbox to figure it out what changed - so we don t really consider it a key event and don t really document it here  Though it was originally defined only for textareas and input boxes  I believe there is some movement toward generalizing it to fire on other types of objects as well

User · Answer

Just wanted to share a curiosity    when using the onkeydown event to activate a JS method  the charcode for that event is NOT the same as the one you get with onkeypress    For instance the numpad keys will return the same charcodes as the number keys above the letter keys when using onkeypress  but NOT when using onkeydown     Took me quite a few seconds to figure out why my script which checked for certain charcodes failed when using onkeydown   Demo  https   www w3schools com code tryit asp filename FMMBXKZLP1MK  and yes   I do know the definition of the methods are different   but the thing that is very confusing is that in both methods the result of the event is retrieved using event keyCode   but they do not return the same value   not a very declarative implementation

User · Answer

A few practical facts that might be useful to decide which event to handle  run the script below and focus on the input box     x000D   x000D     input   on  keyup keydown keypress  e  gt console log e type  e keyCode  e which  e key   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input  gt  x000D   x000D   x000D    Pressing    non inserting typing keys  e g  Shift  Ctrl  will not trigger a keypress  Press Ctrl and release it      keydown 17 17 Control      keyup 17 17 Control  keys from keyboards that apply characters transformations to other characters may lead to Dead and duplicate  keys   e g         on keydown  Press    and release it in order to display a double           keydown 192 192 Dead      keydown 192 192           keypress 180 180         keypress 180 180         keyup 192 192 Dead    Additionally  non typing inputs  e g  ranged  lt input type  range  gt   will still trigger all keyup  keydown and keypress events according to the pressed keys

User · Answer

Most of the answers here are focused more on theory than practical matters and there s some big differences between keyup and keypress as it pertains to input field values  at least in Firefox  tested in 43    If the user types 1 into an empty input element    The value of the input element will be an empty string  old value  inside the keypress handler The value of the input element will be 1  new value  inside the keyup handler    This is of critical importance if you are doing something that relies on knowing the new value after the input rather than the current value such as inline validation or auto tabbing   Scenario    The user types 12345 into an input element  The user selects the text 12345  The user types the letter A    When the keypress event fires after entering the letter A  the text box now contains only the letter A   But    Field val   is 12345   Field val   length is 5 The user selection is an empty string  preventing you from determining what was deleted by overwriting the selection     So it seems that the browser  Firefox 43  erases the user s selection  then fires the keypress event  then updates the fields contents  then fires keyup

User · Answer

First  they have different meaning  they fire    KeyDown     when a key was pushed down KeyUp     when a pushed button was released  and after the value of input textarea is updated  the only one among these  KeyPress     between those and doesn t actually mean a key was pushed and released  see below     Second  some keys fire some of these events and don t fire others  For instance    KeyPress ignores delete  arrows  PgUp PgDn  home end  ctrl  alt  shift etc while KeyDown and KeyUp don t  see details about esc below   when you switch window via alt tab in Windows  only KeyDown for alt fires because window switching happens before any other event  and KeyDown for tab is prevented by system  I suppose  at least in Chrome 71     Also  you should keep in mind that event keyCode  and event which  usually have same value for KeyDown and KeyUp but different one for KeyPress  Try the playground I ve created  By the way  I ve noticed quite a quirk  in Chrome  when I press ctrl a and the input textarea is empty  for KeyPress fires with event keyCode  and event which  equal to 1   when the input is not empty  it doesn t fire at all    Finally  there s some pragmatics    For handling arrows  you ll probably need to use onKeyDown  if user holds    KeyDown fires several times  while KeyUp fires only once when they release the button   Also  in some cases you can easily prevent propagation of KeyDown but can t  or can t that easily  prevent propagation of KeyUp  for instance  if you want to submit on enter without adding newline to the text field   Suprisingly  when you hold a key  say in textarea  both KeyPress and KeyDown fire multiple times  Chrome 71   I d use KeyDown if I need the event that fires multiple times and KeyUp for single key release  KeyDown is usually better for games when you have to provide better responsiveness to their actions  esc is usually processed via KeyDown  KeyPress doesn t fire and KeyUp behaves differently for inputs and textareas in different browsers  mostly due to loss of focus  If you d like to adjust height of a text area to the content  you probably won t use onKeyDown but rather onKeyPress  PS ok  it s actually better to use onChange for this case     I ve used all 3 in my project but unfortunately may have forgotten some of pragmatics   to be noted  there s also input and change events

User · Answer

It seems that onkeypress and onkeydown do the same  whithin the small difference of shortcut keys already mentioned above    You can try this    lt textarea type  text  onkeypress  this value this value    onkeypress    gt  lt  textarea gt   lt textarea type  text  onkeydown  this value this value    onkeydown     gt  lt  textarea gt   lt textarea type  text  onkeyup  this value this value    onkeyup     gt  lt  textarea gt    And you will see that the events onkeypress and onkeydown are both triggered while the key is pressed and not when the key is pressed   The difference is that the event is triggered not once but many times  as long as you hold the key pressed   Be aware of that and handle them accordingly

User · Answer

Check here for the archived link originally used in this answer   From that link      In theory  the onKeyDown and onKeyUp events represent keys being pressed or released  while the onKeyPress event represents a character being typed  The implementation of the theory is not same in all browsers

User · Answer

KeyPress  KeyUp and KeyDown are analogous to  respectively  Click  MouseUp  and MouseDown   Down happens first Press happens second  when text is entered  Up happens last  when text input is complete    The exception is webkit  which has an extra event in there  keydown keypress textInput      keyup  Below is a snippet you can use to see for yourself when the events get fired   x000D   x000D  window addEventListener  keyup   log   window addEventListener  keypress   log   window addEventListener  keydown   log    function log event     console log  event type      x000D   x000D   x000D

User · Answer

The onkeypress event works for all the keys except ALT  CTRL  SHIFT  ESC in all browsers where as onkeydown event works for all keys  Means onkeydown event captures all the keys

User · Answer

Updated Answer   KeyDown   Fires multiple times when you hold keys down  Fires meta key    KeyPress   Fires multiple times when you hold keys down  Does not fire meta keys    KeyUp   Fires once at the end when you release key  Fires meta key    This is the behavior in both addEventListener and jQuery   https   jsbin com vebaholamu 1 edit js console output  lt -- try example     answer has been edited with correct response  screenshot  amp  example

User · Answer

onkeydown is fired when the key is down  like in shortcuts  for example  in Ctrl A  Ctrl is held  down    onkeyup is fired when the key is released  including modifier etc keys   onkeypress is fired as a combination of onkeydown and onkeyup  or depending on keyboard repeat  when onkeyup isn t fired    this repeat behaviour is something that I haven t tested  If you do test  add a comment    textInput  webkit only  is fired when some text is entered  for example  Shift A would enter uppercase  A   but Ctrl A would select text and not enter any text input  In that case  all other events are fired

[javascript] onKeyPress Vs. onKeyUp and onKeyDown

Examples related to javascript

Examples related to dom

Examples related to dom-events