HTML當用戶鍵入到文本輸入

我只是想知道如何去追趕，當用戶鍵入到我的Web應用中的文本輸入字段事件捕獲事件。HTML當用戶鍵入到文本輸入

情景是，我有一個聯繫人列表網格。在表單頂部，用戶可以鍵入他們正在嘗試查找的聯繫人的姓名。一旦文本輸入中有一個以上的字符，我想開始在系統中搜索包含用戶輸入的字符的聯繫人。隨着他們繼續輸入數據更改。

所有它真的是一個簡單的類型進取型的功能（或自動完成），但我想在不同的控制仍然發射數據。

我可以得到從文本輸入的一次輸入已失去焦點的罰款，但這並不適合的情況。

任何想法？

感謝

來源

2012-12-11 Matt

使用[keyup event]（https://developer.mozilla.org/en-US/docs/DOM/element.onkeyup）。 – nnnnnn

使用keyup事件捕獲值作爲用戶類型，並盡一切是你要搜索的價值：

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

另一種選擇將是input事件，捕捉任何輸入，從鍵，粘貼等。

來源

2012-12-11 21:04:25 adeneo

請注意，如果使用鼠標剪切/粘貼，鍵控將不會觸發，但輸入值將會更改。如果這很重要，您還可以將「剪切粘貼」添加到事件中。 –

請注意，如果您鍵入一個鍵，然後快速點擊選項卡轉到下一個控件，鍵控不會始終激活。如果你抓住「模糊」，那就處理這種情況。雖然在這裏添加此事件會使搜索在每次單擊輸入時觸發。 –

@CurtisYallop - 請注意，問題說*「...當用戶輸入」*，如果你想捕獲值的所有變化，'輸入'事件將做到這一點。 – adeneo

我會使用'input'和'propertychange'事件。他們也通過鼠標進行剪切和粘貼。

另外，還要考慮debouncing您的事件處理程序，以便快速打字員不被許多DOM刷新處罰。

來源

2012-12-11 21:07:26 syazdani

請參閱我的試用版：

您應該在每個.input類後放置.combo。

。輸入是一個文本框和.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(); 
});

來源

2012-12-11 21:12:34

爲什麼不使用HTML oninput事件？

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

來源

2016-04-17 12:07:36

HTML當用戶鍵入到文本輸入

回答

相關問題