如何即時追蹤文字欄位中的輸入變化？

在您鍵入時追蹤文字欄位中的輸入變更

與常見的誤解不同，input type="text" onchange 事件在離開時觸發控制（模糊）。若要追蹤發生的更改，請考慮利用 HTML5 的 oninput 事件。

oninput 的優點：

• 感覺就像 onchange，但不會失去對元素的焦點。
• 跨瀏覽器廣泛支持，包括行動設備，IE8 和

實作：

對於IE 以外的瀏覽器，只需為oninput 事件新增一個事件監聽器即可：

document.getElementById('source').addEventListener('input', inputHandler);

對於IE8，包含onpropertychange 的事件偵聽器，如下所示好：

document.getElementById('source').addEventListener('propertychange', inputHandler);

其他注意事項：

雖然oninput 在大多數情況下是可靠的，但它對某些輸入有限制：

• 選擇選項： Firefox/Edge18-/IE9 不會觸發選擇選項的輸入變更。
• 右鍵點擊貼上：使用 onkey* 事件並不理想，因為可以透過右鍵點擊和貼上來更改內容。

在這些中在這種情況下，可能的解決方法是使用 setTimeout 函數手動執行更改追蹤。雖然不那麼優雅，但仍然可以有效捕捉變化。

以上是如何即時追蹤文字欄位中的輸入變化？的詳細內容。更多資訊請關注PHP中文網其他相關文章！