javascript - 用户在文本输入中键入时的 html 捕获事件

Question

我只是想知道当用户在我的 Web 应用程序上的文本输入字段中输入时我如何去捕捉事件。

场景是，我有一个联系人列表网格。在表单的顶部，用户可以键入他们要查找的联系人的姓名。一旦文本输入中有超过 1 个字符，我想开始在系统中搜索包含用户输入的那些字符的联系人。随着他们不断输入数据的变化。

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

一旦输入失去焦点，我可以从输入中取出文本，但这不适合这种情况。

有任何想法吗？

谢谢

Answer 1

使用 keyup 事件在用户键入时捕获值，并尽您所能搜索该值：

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

另一种选择是input事件，它从键、粘贴等中捕获任何输入。

Answer 2

为什么不使用 HTML oninput 事件？

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

Answer 3

我会使用 ' input ' 和 ' propertychange ' 事件。他们也可以通过鼠标进行剪切和粘贴。

另外，考虑去抖动你的事件处理程序，这样快速打字员就不会受到许多 DOM 刷新的惩罚。

Answer 4

看看我的尝试：

你应该把 .combo 放在每个 .input 类之后。

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