input輸入框內容變化實時監聽


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM