input輸入框和textarea文字框的value改變事件
阿新 • • 發佈：2019-01-01
如果寫過檢測input或者textarea輸入框文字檢測的人一定知道onchange或者jq的change方法檢測文字變化是檢測不到的，因為該事件是在文字框獲得焦點，並且改變其中的內容之後再失去焦點才能觸發的，也就是說輸入框單純獲得焦點，或者單純失去焦點，或者獲得焦點的時候和失去焦點的時候內容一樣，onchange方法是都不會觸發的，這就涉及了輸入框屬性改變的問題。
如果在輸入框中輸入內容，在其失焦之前再將剛剛輸入的內容刪掉，並不會觸發onchange事件，這說明onchange事件還是會對輸入框中的文字進行檢測，但是卻不僅僅是對輸入框文字的檢測，還有屬性和狀態的檢測，同時changing才能觸發事件，屬性當然指的是value文字的長度文字內容等，狀態就是input輸入框的聚焦和失焦。
綜上所述，如何只監聽input和textarea文字的變化呢？如下：
<body> <input id="line" type="text" placeholder="請輸入..." > <textarea id="area" placeholder="請輸入" ></textarea> <script> document.getElementById('line').onpropertychange = function(){console.log('IE9或更老的版本');} //IE10及更老版本IE可用，IE11中不可用 $('#line').bind('input',function(){ //相容IE9及以上版本和其他瀏覽器 console.log('value changed!'); }); $('#area').bind('input',function(){ console.log('text changed!!!'); }); </script> </body>
由相容性考慮，如果要相容IE8及更低IE版本瀏覽器，需要使用onpropertychange方法，否則只用input事件監聽文字框的value改變事件即可。