HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件實時監聽input輸入框value的變化 ...
HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件實時監聽輸入框value的變化
oninput 事件在用戶輸入時觸發。
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
提示: 該事件類似於 onchange 事件。不同之處在於 oninput 事件在元素值發生變化是立即觸發, onchange 在元素失去焦點時才會觸發。另外一點不同是 onchange 事件也可以作用於 <keygen> 和 <select> 元素。
oninput 支持的HTML標簽: <input type="password"> <input type="search"> <input type="text"> <textarea>
瀏覽器支持:
Chrome | fireFox | Safari | IE | Opera |
Yes | 4.0+ | 5.0+ | 9.0+ | Yes |
示例:
HTML: <input type="text" oninput="onInput()"> JavaScript: <script type="text/javascript"> function onInput() { console.log("正在輸入..."); } </script> 或 HTML: <input type="text"> JavaScript: <script type="text/javascript"> var oInput = document.querySelector("input"); oInput.oninput = function () { console.log("正在輸入..."); }; </script> 或 HTML: <input type="text"> JavaScript: <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $("input").on("input", function () { console.log("正在輸入..."); }); </script> 或 <script type="text/javascript"> // 同時綁定 input propertychange $('input').bind('input propertychange', function() { console.log("正在輸入..."); }); </script>