如何在不失去焦点的情况下跟踪实时输入变化？

使用“onchange”实时跟踪输入变化而不失去焦点

具有“text”类型的输入控件通常会触发“仅当用户离开（模糊）该字段时才发生 onchange”事件。当跟踪用户键入的更改时，此限制可能会令人沮丧。

幸运的是，现代浏览器提供了更好的解决方案：“oninput”。此事件侦听器提供文本字段内容的实时更新，从而无需失去焦点。为了获得最大的兼容性，建议同时使用“oninput”和“onpropertychange”来支持 IE。

说明此方法的示例：

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

浏览器兼容性的附加说明：

• 所有主流浏览器都支持“oninput”，包括移动浏览器。
• IE8 及以下版本需要“onpropertychange”事件。
• “onchange” " 不适合跟踪键入时的更改，因为它会在失去焦点后出现延迟。

以上是如何在不失去焦点的情况下跟踪实时输入变化？的详细内容。更多信息请关注PHP中文网其他相关文章！