Question

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

情节是，我有一个联系人列表网格。在表单的顶部，用户可以键入他们试图找到的联系人的姓名。一旦文本输入中有多个字符，我想开始在系统中搜索包含用户输入的字符的联系人。因为他们不断输入数据变化。

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

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

有什么想法吗？

由于

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'事件。它们也可以通过鼠标进行切割和粘贴。

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

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

用户输入文本输入时的html catch事件

4 个答案: