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

【问题标题】：html catch event when user is typing into a text input用户在文本输入中键入时的 html 捕获事件
【发布时间】：2012-12-11 21:01:39
【问题描述】：

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

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

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

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

有什么想法吗？

谢谢

【问题讨论】：

使用keyup event。

标签： javascript jquery html input typeahead

【解决方案1】：

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

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

另一个选项是input 事件，它可以捕获任何输入，包括按键、粘贴等。

【讨论】：

请注意，如果您使用鼠标剪切/粘贴，keyup 不会触发，但输入值会改变。如果这很重要，您还可以在事件中添加“剪切粘贴”。
请注意，如果您键入一个键然后快速按 Tab 键转到下一个控件，keyup 并不总是触发。如果您发现“模糊”，则可以处理这种情况。尽管在此处添加此事件会在您每次单击输入时触发搜索。
@CurtisYallop - 请注意，问题是 “...当用户键入时”，如果您想捕捉值的所有变化，input 事件会这样做。

【解决方案2】：

为什么不使用 HTML oninput 事件？

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

【讨论】：

没有不必要的开销就不好玩。

【解决方案3】：

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

另外，请考虑 debouncing 您的事件处理程序，以便快速打字员不会因多次 DOM 刷新而受到惩罚。

【讨论】：

【解决方案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();
});

【讨论】：