原生js監聽input值發生變化

原生JS中能夠使用oninput,onpropertychange,onchange

oninput，onpropertychange，onchange的用法

1） onchange 觸發事件必須知足兩個條件：

a）當前對象屬性改變，而且是由鍵盤或鼠標事件激發的（腳本觸發無效）

b）當前對象失去焦點(onblur)；

2） onpropertychange ，只要當前對象屬性發生改變，都會觸發事件，可是它是IE專屬的；

3） oninput 是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不一樣，它綁定於對象時，並不是該對象全部屬性改變都能觸發事件，它只在對象value值發生改變時奏效。

親自測試

Ie9如下經過 onpropertychange能監聽到input值的改變

 

 

 

 在Ie9，及其以上和谷歌瀏覽器測試時經過 oninput 來監測值的改變

 

 

 

JQuery

經過bind方法來監聽input值發生改變

　<input type="text" id="inputs" value="2222">

$("#inputs").bind('input propertychange',function(e){
    console.log($(this).val())
})

    用的bind，當遇到追加的新input標籤時，則不能監聽了,能夠使用live替代

$('input').live('input propertychange', function()
{
  //獲取input 元素,並實時監聽用戶輸入
  //邏輯
})