HTML文本输入框change事件触发过晚 如何在输入内容时实时触发？

问题原因 #

onchange 事件原生触发规则为：仅在输入框失焦、用户按下回车确认输入时才会执行绑定函数，无法响应输入过程中的实时内容变动。

解决方案 #

将输入框绑定的onchange事件替换为oninput事件即可，oninput事件会在输入框内容发生变化时立刻触发，完全满足实时校验输入内容的需求。

修改后的HTML代码如下：

<input type="text" id="newThingName" oninput="textChange(this);" placeholder="new thing name">
<button id="addThingBtn" onclick="addThing();" disabled> Add thing </button>

原有JavaScript、CSS代码无需改动即可正常运行。

若需要兼容IE9及以下版本的旧浏览器，可以同时绑定两个事件做向下兼容：

<input type="text" id="newThingName" oninput="textChange(this);" onpropertychange="textChange(this);" placeholder="new thing name">

内容的提问来源于stack exchange，提问作者Jesper