input標簽內容改變的觸發事件

1. onchange事件與onpropertychange事件的區別：

　　onchange事件在內容改變（兩次內容有可能相等）且失去焦點時觸發；onpropertychange事件是實時觸發，每增加或刪除一個字符就會觸發，通過js改變也會觸發該事件，但是該事件是IE專有。

2. oninput事件與onpropertychange事件的區別：

　　oninput事件是IE之外的大多數瀏覽器支持的事件，在value改變時實時觸發，但是通過js改變value時不會觸 發；onpropertychange事件是任何屬性改變都會觸發，而oninput卻只在value改變時觸發，oninput要通過 addEventListener()來注冊，onpropertychange注冊方法與一般事件相同。

3. oninput與onpropertychange失效的情況：

oninput事件：

　　（1）當腳本中改變value時，不會觸發；

　　（2）從瀏覽器的自動下拉提示中選取時，不會觸發；

onpropertychange事件：

　　當input設置為disable=true后，不會觸發

 

其實對於一般的input標簽；只要用下面的代碼就能實現；但是對於使用了日期插件的就不能用了：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onchange="handle()">

方案一：

$("#id").keyup(function(){
    alert("bingo");
});

方案二：

//對於有日期插件的怎么辦呢：下面來解決：：：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onchange="handle()">

 var starttime= document.getElementById("SXYF");
   if("\v"=="v") { //判斷瀏覽器是否是IE
       starttime.onpropertychange = handle;
   }else{
       starttime.addEventListener("input",handle,false);
   }

方案三：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: 'SXYF',dateFmt:'yyyy-MM',skin:'whyGreen'});" readonly="readonly" value="" onpropertychange="handle()">

//firefox下檢測狀態改變只能用oninput,且需要用addEventListener來注冊事件。
   if(/msie/i.test(navigator.userAgent))    //ie瀏覽器
   {
       document.getElementById('SXYF').onpropertychange=handle
   }
   else
   {//非ie瀏覽器，比如Firefox
       document.getElementById('SXYF').addEventListener("input",handle,false);

   function handle()
       {

          alert("bingo);

       }

 

擴展：

http://www.jb51.net/article/14654.htm