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

dom-events, javascript

Solution

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)

Problem

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: 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. 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/ )

Original source