44

I have been trying to understand JavaScript keypress, keydown, keyup and input events. But I found them quite confusing. Could someone please point out the exact differences? Also I would like to know do all of them get triggered when the user paste a piece of text.

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Tony Vincent
  • 13,354
  • 7
  • 49
  • 68

2 Answers2

57

According to jQuery docs:

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

The keyup event is sent to an element when the user releases a key on the keyboard.

The oninput event it's an event that triggers whenever the input changes.

However the input event is not supported in IE version below 9. In that case, you could use proprietary event onpropertychange, it does the same as oninput.

But in your case, you could use the paste and change event together. You should use change too because paste only happens on browsers that support it on an explicit paste.

Community
  • 1
  • 1
dodopok
  • 868
  • 14
  • 22
  • 14
    At leat on chrome (63) where I am testing, keypress and keydown are triggered **before** the event is processed, so the key event hasn't changed the input's value, yet. Input, on the other hand, is processed after. That means if you access the inputs value, you will get the _previous_ value on the keypress and keydown event listeners. – RSinohara Nov 20 '17 at 10:59
  • 1
    @RSinohara - thats funny - I'm on Chromium on Linux - "68.0.3440.106" (64 bit). The behavior I see is the **EXACT** opposite. Go figure. – dgo Sep 04 '18 at 23:19
  • If you're trying to listen to user hitting enter key to trigger some action, you need to use keypress or keyup, because enter doesn't change the field value (so input won't fire). – Kip Dec 27 '18 at 20:43
  • Alternatively, inside keydown you can use setTimeout(()=>e.target.value, 0), to get the value after the key is added (if you're using vanilla js) – kuceb Jan 16 '19 at 20:15
  • @RSinohara Use the `keyup` event for the updated input value –  Aug 20 '19 at 22:35
0

Since this is being treated as the definitive JS answer (rather than just a jQuery answer) here's a current standard JavaScript answer with MDN references:

  • input event - fired when the content changes. This includes mouse pastes and non-keyboard input.
  • keyup event - fired when a key is released. This includes shift key, control key, and other keys that don't change the value of input elements.

Docs for all events

mikemaccana
  • 110,530
  • 99
  • 389
  • 494