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

 


免責聲明!

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



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