跟蹤輸入類型=「文本」中鍵入的onchange的最佳方法？

以個人經驗， input type="text" onchange事件一般僅在您離開（ blur ）控件後才發生。

有沒有一種方法能夠強制瀏覽器在每次textfield內容更改時觸發onchange ？ 若是沒有，那麼「手動」跟蹤的最優雅的方法是什麼？

使用onkey*事件並不可靠，由於您能夠右鍵單擊該字段並選擇「粘貼」，這將更改該字段而無需任何鍵盤輸入。

是setTimeout的惟一方法嗎？..醜陋的:-)

---

#1樓

Javascript在這裏是不可預測的且有趣的。

• 僅當您模糊文本框時纔會發生onchange
• onkeyup和onkeypress並不是老是在文本更改時發生
• onkeydown在文本更改時發生（但沒法經過單擊鼠標來跟蹤剪切和粘貼）
• 按下按鍵，甚至用鼠標右鍵單擊， oncut發生onpaste和oncut 。

所以，要跟蹤文本框中的更改，咱們須要onkeydown ， oncut和onpaste 。 在這些事件的回調中，若是您檢查文本框的值，那麼您將沒法獲取更新的值，由於回調後該值會發生更改。 所以，解決方案是將超時功能設置爲50毫秒（或更短）的超時時間來跟蹤更改。

正如我研究的那樣，這是一個骯髒的技巧，但這是惟一的方法。

這是一個例子。 http://jsfiddle.net/2BfGC/12/

---

#2樓

請使用JQuery判斷下一種方法：

HTML：

<input type="text" id="inputId" />

Javascript（JQuery）：

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

---

#3樓

我有相似的要求（推特樣式文本字段）。 用於onkeyup和onchange 。 實際上， onchange會在失去焦點時負責鼠標粘貼操做。

[更新]在HTML5或更高版本中，使用oninput獲取實時字符修改更新，如上面其餘答案所述。

---

#4樓

這些天來監聽oninput 。 這感受就像onchange ，無需失去焦點的元素。 是HTML5。

除IE8及如下版本以外，全部人（甚至移動設備）都支持它。 對於IE，請添加onpropertychange 。 我這樣使用它：

const $source = document.querySelector('#source'); const $result = document.querySelector('#result'); const typeHandler = function(e) { $result.innerHTML = e.target.value; } $source.addEventListener('input', typeHandler) // register for oninput $source.addEventListener('propertychange', typeHandler) // for IE8 // $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough

<input id="source" /> <div id="result"></div>

---

#5樓

onkeyup會在您鍵入內容後發生，例如，當我鬆開手指時按下t會發生動做，而在keydown上會發生在我輸入字符t

但願這對某人有幫助。

所以，當您要發送剛輸入的內容時， onkeyup更好。