对于JavaScript自动填充搜索框，我们必须使用“输入”功能。事件处理程序 [英] For a JavaScript autocomplete search box, must we use the "input" event handler?

问题描述

我试图区分 keydown ， keypress ， keyup的不同用途，输入，在JavaScript中更改事件。

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

如果它是一个JavaScript自动完成搜索框，我们是否必须使用输入事件处理程序？

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

原因是：

1. 更改在用户按Enter或离开该输入框（通过Tab键或单击输入框外部）之前，不会调用事件处理程序，因此更改事件不可能当用户在输入框中输入另一个字符时，就可以达到建议的目的。

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.

keydown 事件处理程序可以用来添加键盘到搜索词，但是对于CTRL-v或CMD-v（在Mac上）粘贴它，我们无法真正得到 keyCode 如果我们将一个单词如 hello 粘贴到搜索框中 - 因为只有一个keydo wn将用于CTRL和 v 的一个keydown，而不是 hello - 但我们可以使用输入框的值属性来获取值 - 但是，如果用户使用鼠标右键单击并选择粘贴以向框中添加文本，该怎么办 - 在这种情况下我们应该使用鼠标事件处理程序来查看值属性吗？处理如此低水平的键盘和鼠标太麻烦了。

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.

所以 input 事件处理程序似乎恰好符合确切的目的，因为任何值更改，输入事件处理程序将被调用。这就是为什么输入事件处理程序可能很重要且有用。

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.

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

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?

（了解什么事件处理程序被称为jsfiddle：http://jsfiddle.net/jYsjs/ ）

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

推荐答案

你大部分都是对的，这里详细介绍了事件和潜在的输入案例。

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

这是不同的事件被触发：

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

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.

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

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

keydown

keydown

keydown 事件非常简单，它会在用户按下按键时触发。

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

keypress

keypress

keypress 事件应该代表正在输入的字符。因此，它不捕获退格或删除，立即解除它以便在 keydown 上使用。

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

keyup

很像 keydown ，只要用户释放密钥就会触发。

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

粘贴

paste

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

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

注意 keydown ， keypress 和 keyup 随身携带有关修饰键的信息 Ctrl ， Shift 和 Alt 在属性 ctrlKey ， shiftKey 和 altKey 分别。

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.

以下列出了您需要考虑的案例：

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

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

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

触发： KEYDOWN ， keypress ，输入， keyup

删除输入（ Backspace / 删除）

触发器： keydown ，输入， keyup

使用 Ctrl + V

触发器： keydown ，粘贴，输入， keyup

使用鼠标粘贴

触发器：粘贴，输入

从中选择一项自动完成（↑ / ↓）

Select an item from the autocomplete (↑/↓)

触发器： keydown ， keyup

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

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.

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

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

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

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);
}

参考文献

• HTML 5规范 - 常见事件行为


• SO - onKeyPress Vs 。 onKeyUp和onKeyDown


• SO - JavaScript在粘贴事件（跨浏览器）上获取剪贴板数据



References

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

这篇关于对于JavaScript自动填充搜索框，我们必须使用“输入”功能。事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！