js實現的文本框內容發生改變立馬觸發事件簡單介紹:
本章節介紹一下如何在文本框的內容發生變化的時候,立馬觸發一個事件執行響應的操作,而不是像是keydown或者keyup事件一樣,只能夠檢測通過鍵盤輸入導致內容的變化, 下面就通過代碼實例做一下簡單介紹。
一.相關知識准備:
1.onchange事件:
此事件會在元素內容發生改變,且失去焦點的時候觸發。
瀏覽器支持度較好。
2.onpropertychange事件:
此事件會在元素內容發生改變時立即觸發,即便是通過js改變的內容也會觸發此事件。
元素的任何屬性改變都會觸發該事件,不止是value。
只有IE11以下瀏覽器支持此事件。
3.oninput事件:
此事件會在value屬性值發生改變時觸發,通過js改變value屬性值不會觸發此事件。
只有IE8以上或者谷歌火狐等標准瀏覽器支持。
二.代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var otxt=document.getElementById("txt"); var oshow=document.getElementById("show"); var count=0; if(document.all){ otxt.onpropertychange=function(){ count=count+1; oshow.innerHTML=count; } } else{ otxt.oninput=function(){ count=count+1; oshow.innerHTML=count; } } } </script> </head> <body> <div id="show"></div> <input type="text" id="txt" value="螞蟻部落"/> </body> </html>