JavaScript 实时监听input 中值变化

JavaScript 实时监听input 中值变化

在 <input> 标签中，添加属性 oninput ，oninput 事件在元素获得用户输入时发生。
当 <input> 或 <textarea> 元素的值发生改变时，会发生此事件。可以监控的HTML 标签：<input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type="number">, <input type="password">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week"> and <textarea>
具体的实现代码
HTML ：

<element oninput="myScript()">

其中element 即上面提到的HTML标签
JavaScript:

<script>
function myScript() {
  alert("The value of the input field was changed.");
}
</script>

值得注意的是该属性和onchange 属性是有着很大的区别的，虽然两者都是在input的内容变化后触发，但是它们的触发机制还是有些许的不一样，oninput 属性在元素的内容改变后立即响应，而onchange 属性则是元素失去焦点（通俗一点理解就是点击了其他的元素），并且元素的内容被改变的情况下才会触发，而且onchange 支持select 标签