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

追蹤輸入文字欄位即時變更的最佳方式

使用 input type="text" 時，onchange 事件通常僅在使用者離開焦點後發生來自外地。如果需要追蹤所做的更改，這可能會出現問題。

瀏覽器對動態追蹤的支援

現代瀏覽器透過 oninput 事件提供解決方案。每次文字欄位的內容發生變更時都會觸發此事件。它是 onchange 的近乎完美的替代品，提供即時監控，而無需失去元素的焦點。所有主流瀏覽器都支持，包括行動瀏覽器。

跨瀏覽器相容性

對於較舊的瀏覽器，包括 IE8 及以下版本，onpropertychange 事件和 oninput 事件的組合可以確保跨瀏覽器相容性瀏覽器相容性。

程式碼範例

這是一個範例展示如何使用oninput 和onpropertychange 進行跨瀏覽器追蹤的程式碼：

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerText = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler);

// For completeness, include listen for option changes which won't trigger either input or change
source.addEventListener('change', inputHandler);

對於不支援oninput 或onchange 的瀏覽器，可以使用setTimeout 函數作為替代方案，但它不太優雅或與上述解決方案一樣有效。

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