For a JavaScript autocomplete search box, must we use the "input" event handler?

Question

I am trying to distinguish the different use of the keydown, keypress, keyup, input, change event in JavaScript.

If it is a JavaScript autocomplete search box, is it true that we have to use the input event handler?

The reason is:

1. the change event handler won't be invoked until the user press Enter or leave that input box (by the Tab key or clicking outside of the input box), so the change event cannot possibly fit the purpose of making suggestion when the user types in one more character to the input box.

2. The keydown event handler can be used to "add" the keystroke to the search term, but for CTRL-v or CMD-v (on Mac) to paste it, we can't really get the keyCode one by one if we paste a word such as hello into the search box -- because only one keydown will be for the CTRL and one keydown for the v, instead of hello -- but we can use the input box's value attribute to get the value -- however, what if the user uses the mouse to right click and choose "paste" to add text to the box -- in which case should we, or can we use a mouse event handler to look at the value attribute? It is just too messy to deal with such low level of keyboard and mouse.

So the input event handler seems to just fit the exact purpose because ANY value change, the input event handler will be invoked. And that's why the input event handler can be important and useful.

We still need the keydown event handler, because what if the user presses the Down Arrow key to go down on the list of possible item? (and possibly the ESC to make the autocomplete suggestion box disappear). In these cases, the input event handler and the change event handler won't be invoked, and the keydown event will be useful for these cases.

Is the above concept correct, mainly for understanding the input event?

(A jsfiddle for understanding what events handlers are called: http://jsfiddle.net/jYsjs/ )

Answer 1

You have it mostly right, here is a detailed look at the events and potential input cases.

JavaScript events

This is when the different event are triggered:

• change

  This will be called when the blur event is triggered if the value of the <input> has been changed. In other words it will trigger when the input loses focus and the value is different to what it was.

• input

  The input event is basically everything you are looking for, it captures the event on any input change and most likely came about due to the headaches causes when developing something that watches every keystroke. The input event even manages to catch the case where the mouse pastes in content.

  Unfortunately the input event is relatively new and only available to modern browsers (IE9+).

• keydown

  The keydown event is pretty simple, it triggers when the user pushes the key down.

• keypress

  The keypress event is supposed to represent a character being typed. Because of this, it does not capture backspace or delete which immediately dismisses it for use over keydown.

• keyup

  Much like keydown, it triggers whenever the user releases a key.

• paste

  This handy event triggers when data is pasted into the element.

Modifier keys

Note that keydown, keypress and keyup carry with them information about the modifier keys Ctrl, Shift and Alt in the properties ctrlKey, shiftKey and altKey respectively.

The cases

Here is a list of the cases you need to consider:

• Entering input with keyboard (includes holding down a key)

  Triggers: keydown, keypress, input, keyup

• Deleting input (Backspace/Delete)

  Triggers: keydown, input, keyup

• Pasting using Ctrl+V

  Triggers: keydown, paste, input, keyup

• Using mouse to paste

  Triggers: paste, input

• Select an item from the autocomplete (↑/↓)

  Triggers: keydown, keyup

Implementation

Given the above, you could implement your autocomplete box handling the input event for all changes to the input, and then keydown event to handling up and down. This would really separate everything nicely and lead to some pretty clean code.

If you want to support IE8, you will need to throw everything except pasting into the keydown event and then handle paste. The paste event is quite widely supported now and has been in IE since v5.5).

Experimenting with events

Here is the jsFiddle I used to test the events, you might find it useful. It shows a bit more information about each event:

function logEvent(e) {
    console.log(e.type +
                "\n    this.value = '" + this.value + "'" +
                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +
                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));
    console.log(e);
}

References

• HTML 5 Spec - Common event behaviors
• SO - onKeyPress Vs. onKeyUp and onKeyDown
• SO - JavaScript get clipboard data on paste event (Cross browser)