Js（Jquery）實時監聽input輸入框值的變化
阿新 • • 發佈：2018-12-13
效果圖
Js寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" /> </body> <script type="text/javascript"> // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 function OnInput (event) { console.log(event.target.value); } // Internet Explorer function OnPropChanged (event) { if (event.propertyName.toLowerCase () == "value") { console.log(event.srcElement.value); } } </script> </html>
Jquery寫法
$("#input1").bind("input propertychange",function(event){
console.log($("#input1").val())
});
原理
一、首先分清下面幾個概念：
- onchange事件:此事件會在元素內容發生改變，且失去焦點的時候觸發。瀏覽器支援度較好。
- onpropertychange事件:此事件會在元素內容發生改變時立即觸發，即便是通過js改變的內容也會觸發此事件。元素的任何屬性改變都會觸發該事件，不止是value。只有IE11以下瀏覽器支援此事件。
- oninput事件:此事件會在value屬性值發生改變時觸發，通過js改變value屬性值不會觸發此事件。只有IE8以上或者谷歌火狐等標準瀏覽器支援。
二、然後我們主要是結合 HTML5 標準事件 oninput 和 IE 專屬事件 onpropertychange 事件來監聽輸入框值變化。
oninput 是 HTML5 的標準事件，對於檢測 textarea, input:text, input:password 和 input:search 這幾個元素通過使用者介面發生的內容變化非常有用，在內容修改後立即被觸發，不像 onchange 事件需要失去焦點才觸發。不過oninput 事件在 IE9 以下版本不支援，需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的寫法。