捕获用户输入文本框时的HTML事件

Question

我想知道如何捕获用户在我的Web应用程序中输入文本输入字段时的事件。

场景是，我有一个联系人列表网格。在表单顶部，用户可以键入他们要查找的联系人的名称。一旦文本输入中有多于1个字符，我就想开始搜索系统中包含用户输入的这些字符的联系人。随着他们继续输入，数据会发生变化。

实际上，这只是一个简单的类型前进功能（或自动完成），但我想在不同的控件中触发数据。

当输入框失去焦点时，我可以轻松地获取输入框中的文本，但这与情况不符。

有什么想法吗？

谢谢

- Matt

---

使用 keyup 事件。 - nnnnnn

Answer 1

使用 keyup 事件来获取用户输入的值，然后执行搜索该值的操作。

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

另一个选择是使用input事件来捕获任何输入，包括按键、粘贴等。

- adeneo

---

请注意，如果您使用鼠标剪切/粘贴文本，keyup事件将不会触发，但输入值将会更改。如果这很重要，您也可以将"cut paste"事件添加到其中。 - Curtis Yallop

请注意，如果您输入一个键，然后快速按下Tab键切换到下一个控件，则keyup事件不总是会触发。如果您捕获了"blur"事件，那么就可以处理此情况。虽然在此处添加此事件将使搜索每次单击输入框时都触发。 - Curtis Yallop

请注意，问题中提到“...当用户正在输入时”，如果您想捕获值的所有更改，则可以使用 input 事件。 - adeneo

Answer 2

为什么不使用HTML的oninput事件？

<input type="text" oninput="searchContacts()">

- Hiram A

---

没有不必要的额外开销就不好玩。 - Pablo Ariel

Answer 3

我会使用 'input' 和 'propertychange' 事件。它们在通过鼠标剪切和粘贴时也会触发。

此外，考虑对事件处理程序进行 防抖处理，以便快速打字者不会因为多次 DOM 刷新而受到惩罚。

- syazdani

Answer 4

看看我的尝试：

你应该在每个 .input 类后面加上 .combo。

.input 是一个文本框，.combo 是一个 div。

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});

- Poya Eraghi