对于 JavaScript 自动完成搜索框，我们必须使用 "input" 事件处理程序吗？

Question

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

如果它是一个JavaScript自动完成搜索框，是真的，我们必须使用input事件处理程序?

原因是:

1. change事件处理程序将不会被调用，直到用户按下Enter或离开输入框(通过Tab键或单击输入框外)，所以change事件不可能适合当用户在输入框中输入一个字符时提出建议的目的。

2. keydown事件处理程序可用于"添加";搜索词的击键,但 CTRL - v 或 CMD - v (Mac)粘贴,我们不能得到keyCode一个接一个,如果我们将一个词如hello粘贴到搜索框,因为只有一个keydown会 CTRL 和一个keydown v ,而不是hello——但我们可以使用输入框value属性的值,但是,如果用户使用鼠标右键单击,选择"paste"将文本添加到框中——在哪种情况下，我们应该，或者我们可以使用鼠标事件处理程序来查看value属性?处理这么低级别的键盘和鼠标实在是太麻烦了。

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

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

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

(用于理解事件处理程序调用的jsfiddle: http://jsfiddle.net/jYsjs/)

Answer 1

您基本上是对的，下面是对事件和潜在输入情况的详细介绍。

JavaScript事件

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

• change

  当<input>的值被改变时触发blur事件时调用。换句话说，它将在输入失去焦点并且值与原来的值不同时触发。

• input

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

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

• keydown

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

• keypress

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

• keyup

  和keydown很像，当用户释放一个键时，它就会触发

• paste

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

修饰键

请注意，keydown、keypress和keyup分别携带了属性ctrlKey、shiftKey和altKey中Ctrl、Shift和Alt的修饰键信息。

的

以下是你需要考虑的情况:

• 用键盘输入(包括按住一个键)

  触发器:keydown, keypress, input, keyup

• 删除输入(Backspace/Delete)

  触发器:keydown, input, keyup

使用<<li>

粘贴kbd> Ctrl + V

触发器:keydown, paste, input, keyup

• 使用鼠标粘贴

  触发器:paste, input

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

  触发器:keydown, keyup

实施

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

如果你想支持IE8，你需要把除了粘贴之外的所有东西都扔到keydown事件中，然后处理paste。paste事件现在得到了相当广泛的支持，从v5.5开始就在IE中了。

实验事件

下面是我用来测试事件的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);
}

引用

• HTML 5规范-常见事件行为
• SO - onKeyPress Vs. onKeyUp和onKeyDown
• SO - JavaScript获取剪贴板数据的粘贴事件(跨浏览器)