原生js监听input值发生变化
生活随笔
收集整理的這篇文章主要介紹了
原生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 元素,并實時監聽用戶輸入//邏輯 })?
轉載于:https://www.cnblogs.com/Tohold/p/10452869.html
總結
以上是生活随笔為你收集整理的原生js监听input值发生变化的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 快讯|腔家政服务商“懒猪到家”完成200
- 下一篇: Dart 2.2 发布,谷歌推出的结构化