如何跨瀏覽器即時追蹤文字輸入變化？

文字輸入中的鍵入追蹤

文字輸入的 onchange 事件通常僅在失去焦點後觸發。但是，對於需要即時追蹤的場景，有多種選擇。

oninput 事件

現代瀏覽器支援 oninput 事件，該事件會隨著文字欄位的不斷觸發內容而改變。這樣就無需失去焦點。

onpropertychange

對於 Internet Explorer 8 及更低版本，您可以使用 onpropertychange 事件。

使用輸入和屬性變更進行事件處理

透過組合 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 IE8

選擇框的注意事項

Firefox、Edge 18-和IE9 不會觸發onchange 事件當在選擇框中選擇選項時。對於這些瀏覽器，請考慮改用變更事件偵聽器。

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