对于 JavaScript 自动完成搜索框，我们是否必须使用“输入”事件处理程序？

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

提问by nonopolarity

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

我试图区分JavaScript 中keydown, keypress, keyup, input,change事件的不同用法。

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

如果是 JavaScript 自动完成搜索框，是不是一定要使用input事件处理程序？

The reason is:

原因是：

1. the changeevent 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 changeevent cannot possibly fit the purpose of making suggestion when the user types in one more character to the input box.

2. The keydownevent 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 keyCodeone by one if we paste a word such as hellointo 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 valueattribute 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 valueattribute? It is just too messy to deal with such low level of keyboard and mouse.

1. 该change事件处理程序将不会被调用，直到用户按Enter键或离开这个输入框（按Tab键或输入框的点击之外），所以change事件不可能适合制作建议的目的，当一个用户类型的更多字符到输入框。

2. 该keydown事件处理程序可用于“添加”击键到搜索词，但对于CTRL-V或CMD-V（在Mac上），以贴吧，我们不能真正得到keyCode一个接一个，如果我们粘贴字，就像hello进入搜索框一样——因为只有一个 keydown 用于 CTRL 而一个 keydown 用于v, 而不是hello——但是我们可以使用输入框的value属性来获取值——但是，如果用户使用鼠标来右键单击并选择“粘贴”将文本添加到框中——在这种情况下，我们应该，还是可以使用鼠标事件处理程序来查看value属性？处理这么低水平的键盘和鼠标实在是太麻烦了。

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

所以input事件处理程序似乎正好符合确切的目的，因为任何值更改，input都会调用事件处理程序。这就是为什么input事件处理程序很重要和有用的原因。

We still need the keydownevent 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 inputevent handler and the changeevent handler won't be invoked, and the keydownevent will be useful for these cases.

我们仍然需要keydown事件处理程序，因为如果用户按下向下箭头键在可能的项目列表中向下移动怎么办？（也可能是使自动完成建议框消失的 ESC）。在这些情况下，将不会调用input事件处理程序和change事件处理程序，并且keydown事件对这些情况很有用。

Is the above concept correct, mainly for understanding the inputevent?

以上概念是否正确，主要是为了理解input事件？

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

（用于了解调用什么事件处理程序的 jsfiddle：http: //jsfiddle.net/jYsjs/）

回答by Daniel Imms

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

您说得基本正确，这里详细介绍了事件和潜在输入案例。

JavaScript events

JavaScript 事件

This is when the different event are triggered:

这是触发不同事件的时间：

• change

  This will be called when the blurevent 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 inputevent 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 inputeventis relatively new and only available to modern browsers (IE9+).

• keydown

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

• keypress

  The keypressevent 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.

• change

  blur如果 的值<input>已更改，则在触发事件时将调用此方法。换句话说，它会在输入失去焦点并且值与原来不同时触发。

• input

  该input事件基本上是您正在寻找的一切，它捕获任何输入更改的事件，并且很可能是由于开发监视每次击键的东西时的头痛原因引起的。输入事件甚至设法捕捉鼠标粘贴内容的情况。

  不幸的是，该input事件相对较新，仅适用于现代浏览器（IE9+）。

• keydown

  该keydown事件非常简单，当用户按下键时触发。

• keypress

  该keypress事件应该代表正在键入的字符。因此，它不会捕获退格或删除，这会立即将其关闭以供使用keydown。

• keyup

  很像keydown，它会在用户松开按键时触发。

• paste

  当数据粘贴到元素中时，会触发这个方便的事件。

Modifier keys

修饰键

Note that keydown, keypressand keyupcarry with them information about the modifier keys Ctrl, Shiftand Altin the properties ctrlKey, shiftKeyand altKeyrespectively.

需要注意的是keydown，keypress与keyup有关的组合键它们携带的信息Ctrl，Shift并Alt在性能ctrlKey，shiftKey并altKey分别。

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

• 用键盘输入（包括按住一个键）

  触发器：keydown, keypress, input,keyup

• 删除输入 ( Backspace/ Delete)

  触发器：keydown, input,keyup

• 使用Ctrl+粘贴V

  触发器：keydown, paste, input,keyup

• 使用鼠标粘贴

  触发器：paste，input

• 从自动完成 ( ↑/ ↓) 中选择一个项目

  触发器：keydown，keyup

Implementation

执行

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

鉴于上述情况，您可以实现您的自动完成框处理input输入的所有更改的事件，然后keydown处理向上和向下的事件。这确实可以很好地分离所有内容并产生一些非常干净的代码。

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

如果你想支持 IE8，你需要把除了粘贴到keydown事件之外的所有东西都扔掉，然后处理paste. 该paste事件现在得到了相当广泛的支持，并且自 v5.5 以来一直在IE 中使用）。

Experimenting with events

试验事件

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

这是我用来测试事件的 jsFiddle，您可能会发现它很有用。它显示了有关每个事件的更多信息：

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)

• HTML 5 规范 - 常见事件行为
• SO - onKeyPress 与。onKeyUp 和 onKeyDown
• SO - JavaScript 在粘贴事件上获取剪贴板数据（跨浏览器）