原生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 元素,並實時監聽用戶輸入 //邏輯 })