13

I use the 'keyup' event when I want to get the value of a text-input immediately after insertion.

Now I've seen in a CodeReview question the usage of an event 'input' for to accomplish the same.

The CodeReview question (5th line): https://codereview.stackexchange.com/questions/141937/registration-form-validation-in-jquery

I've tinkered a bit. Made this demo:

var box = document.querySelector('input');

box.addEventListener('keyup', function() {
  console.log('keyup: %s', this.value);
});

box.addEventListener('input', function() {
  console.log('input: %s', this.value);
});

/* RESULT
  input: a
  keyup: a
  input: ab
  keyup: ab
  input: abc
  keyup: abc
*/
<input type="text" />

As one can see: No difference!

Therefore my question:

Is there a difference between the usage of the keyup-event and the input-event (for reading the value of a text-input)?

And:

Are there cases in which one should prefer the one over the other?

Community
  • 1
  • 1
cluster1
  • 4,968
  • 6
  • 32
  • 49
  • 5
    Yes! If you paste the value using `right-click`, `keyup-handler` will not invoke but `input-handler` will... Few other differences are there as well... – Rayon Sep 27 '16 at 07:05
  • I am amazed I could not find exact _dupe_.. – Rayon Sep 27 '16 at 07:06
  • 1
    May be [__http://stackoverflow.com/questions/38502560/diffrence-between-keyup-keydown-keypress-and-input-events__](http://stackoverflow.com/questions/38502560/diffrence-between-keyup-keydown-keypress-and-input-events) – Rayon Sep 27 '16 at 07:08
  • mouse up is when you mouse up your keyboard within that element while input is when you put something on an input element – Beginner Sep 27 '16 at 07:17
  • 2
    Okay. I know the difference now. If you type: "a", "b", "c" then you both events are triggered. But if you then do mouse right-click and choose "Paste" from the context menu. So that the current content of your clipboard it copied into the textbox then you see that ONLY the input event is triggered. Conclusion: The input-event is triggered whenever the value of the text-input changes. The keyup-event is only triggered when the keyboard is involved. – cluster1 Sep 27 '16 at 07:44

1 Answers1

12

Key up event also detects the control keys like enter,Ctrl,backspace,delete etc on the other hand input event in initiated only for characters numbers and symbols. This is the one difference i found,

Key-up listens all keys

input listens only the characters ,numbers and special characters keys

Mukul Jayaprakash
  • 309
  • 4
  • 13