Question

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

如果是JavaScript自动填充搜索框，我们是否必须使用input事件处理程序？

原因是：

在用户按Enter键或离开该输入框（通过Tab键或单击输入框外部）之前，不会调用change事件处理程序，因此change当用户在输入框中输入另一个字符时，事件不可能符合建议的目的。
keydown事件处理程序可用于将键击“添加”到搜索词，但对于CTRL-v或CMD-v（在Mac上）粘贴它，我们无法真正如果我们将keyCode这样的单词粘贴到搜索框中，则逐个获取hello - 因为只有一个keydown用于CTRL而一个keydown用于v，而不是hello value - 但我们可以使用输入框的value属性来获取值 - 但是，如果用户使用鼠标右键单击并选择“粘贴”以向框中添加文本，该怎么办 - - 在这种情况下我们应该使用鼠标事件处理程序来查看input属性吗？处理如此低水平的键盘和鼠标实在太麻烦了。

因此，input事件处理程序似乎恰好符合确切的目的，因为任何值更改，将调用input事件处理程序。这就是keydown事件处理程序重要且有用的原因。

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

上述概念是否正确，主要是为了理解{{1}}事件？

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

Answer 1

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

JavaScript事件

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

<强> change

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

input事件基本上就是你要找的东西，它会在任何输入变化时捕获事件，并且很可能是由于在开发监视每次击键的事情时头痛的原因。输入事件甚至设法捕获鼠标粘贴内容的情况。

不幸的是，input event相对较新，仅适用于现代浏览器（IE9 +）。
<强> keydown

keydown事件非常简单，当用户按下按键时触发。
<强> keypress

keypress事件应该是represent a character being typed。因此，它不会捕获退格或删除，它会立即将其解除，以便在keydown上使用。
<强> keyup

与keydown非常相似，只要用户释放密钥，它就会触发。
<强> paste

将数据粘贴到元素中时会触发此便利事件。

修改键

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

案例

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

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

触发器：keydown，keypress，input，keyup
删除输入（ Backspace / 删除）

触发器：keydown，input，keyup
使用 Ctrl + V 进行粘贴

触发器：keydown，paste，input，keyup
使用鼠标粘贴

触发器：paste，input
从自动填充中选择一项（↑ / ↓）

触发器：keydown，keyup

实施

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

如果您想支持IE8，则需要将除粘贴之外的所有内容抛出keydown事件，然后处理paste。 paste事件现在受到广泛支持，并且已经在IE since v5.5）。

试验事件

Here is the 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);
}

对于JavaScript自动填充搜索框，我们必须使用“输入”事件处理程序吗？

1 个答案:

JavaScript事件

修改键

案例

实施

试验事件

参考