js監(jiān)聽input輸入框值的實時變化實例
1、在元素上同時綁定 oninput 和onporpertychanger事件
例:
<script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" />
2、使用原生js添加監(jiān)聽事件
<script type="text/javascript"> $(function(){ if("\v"=="v"){//true為IE瀏覽器,感興趣的同學可以去搜下,據(jù)說是現(xiàn)有最流行的判斷瀏覽器的方法 document.getElementById("a").attachEvent("onporpertychange",function(e){ console.log("inputting!!"); } }else{ document.getElementById("a").addEventListener("onporpertychange",function(e){ console.log("inputting!!"); } } }); </script> <input type="text" id="a"/>
3、使用jQuery方法綁定事件
<script type="text/javascript"> $(function(){ $("#a").bind('input porpertychange',function(){ console.log("e"); }); }); </script> <input type="text" id="a"/>
在監(jiān)聽到 onpropertychange 事件后,可以使用 event 的 propertyName 屬性來獲取發(fā)生變化的屬性名稱,event.propertyName
實例1:
<input type="text" oninput=" " onpropertychange="" value="Text field" />
實例2:
$("#name").bind('input porpertychange',function(){ var thisTxt=$("#name").val(); $(this).siblings("p").html(thisTxt) })
實例3:
//手機號碼分段顯示 register.phonePropertychange = function() { _this = register; _input = $(this); var v = $(this).val(); v = v.replace(new RegExp(/ /g),''); var v1 = v.slice(0,3); var v2 = v.slice(3,7); var v3 = v.slice(7,11); if(v2==''){ _input.focus().val(v1); }else if(v3==''){ _input.focus().val(v1+' '+v2); }else{ _input.focus().val(v1+' '+v2+ ' '+v3); }; //手機號輸入完成字體顏色改變 if (v.length === 11) { if(_this.regexpPhone(v)){ _input.css('color','#000'); $('#btnSendCode').addClass('c-26a949'); _input.blur();; }else{ layer.open({content: '手機號碼不正確,請重新輸入',time: 2, end:function(){ _input.val(''); }}); } }else{ _input.css('color','#26a949'); } } //驗證手機號 register.regexpPhone = function(phone){ return /^1[3|4|5|7|8]\d{9}$/.test(phone); }
以上這篇js監(jiān)聽input輸入框值的實時變化實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
swiperjs實現(xiàn)導航與tab頁的聯(lián)動
這篇文章主要為大家詳細介紹了swiperjs實現(xiàn)導航與tab頁的聯(lián)動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12JavaScript實現(xiàn)的使用鍵盤控制人物走動實例
這篇文章主要介紹了JavaScript實現(xiàn)的使用鍵盤控制人物走動實例,也可說是一個JS實現(xiàn)的小人走動小游戲,需要的朋友可以參考下2014-08-08bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當前行數(shù)據(jù)
這篇文章主要為大家詳細介紹了bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當前行數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09基于Web Audio API實現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實現(xiàn)音頻可視化效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06uniapp中scroll-view實現(xiàn)自動滾動到最底部的方法
這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view實現(xiàn)自動滾動到最底部的相關(guān)資料,在uniapp日常開發(fā)的過程中經(jīng)常會有局部滾動的需求,而scroll-view組件正好可以滿足這一需求,需要的朋友可以參考下2023-10-10解決layer.confirm快速點擊會重復觸發(fā)事件的問題
今天小編就為大家分享一篇解決layer.confirm快速點擊會重復觸發(fā)事件的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實現(xiàn)動態(tài)表格的添加,修改,刪除功能(推薦)
這篇文章主要介紹了JS實現(xiàn)動態(tài)表格的添加,修改,刪除功能(推薦)的相關(guān)知識,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧2016-06-06