用戶輸入文本輸入時的html catch事件

Question

我只是想知道當用戶在我的Web應用程序中輸入文本輸入字段時如何捕獲事件。

場景是，我有一個聯系人列表網格。 在表單的頂部，用戶可以鍵入他們試圖找到的聯系人的姓名。 一旦文本輸入中有多個字符，我想開始在系統中搜索包含用戶輸入的字符的聯系人。 因為他們不斷輸入數據變化。

它實際上只是一個簡單的類型提前類型功能（或自動完成），但我想在不同的控件中啟動數據。

一旦輸入失去焦點，我就可以從輸入中獲取文本，但這不適合這種情況。

有任何想法嗎？

謝謝

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

看看我的嘗試：

你應該在每個.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();
});