js監(jiān)聽input輸入框值的實(shí)時(shí)變化實(shí)例
1、在元素上同時(shí)綁定 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瀏覽器,感興趣的同學(xué)可以去搜下,據(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
實(shí)例1:
<input type="text" oninput=" " onpropertychange="" value="Text field" />
實(shí)例2:
$("#name").bind('input porpertychange',function(){ var thisTxt=$("#name").val(); $(this).siblings("p").html(thisTxt) })
實(shí)例3:
//手機(jī)號(hào)碼分段顯示 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); }; //手機(jī)號(hào)輸入完成字體顏色改變 if (v.length === 11) { if(_this.regexpPhone(v)){ _input.css('color','#000'); $('#btnSendCode').addClass('c-26a949'); _input.blur();; }else{ layer.open({content: '手機(jī)號(hào)碼不正確,請(qǐng)重新輸入',time: 2, end:function(){ _input.val(''); }}); } }else{ _input.css('color','#26a949'); } } //驗(yàn)證手機(jī)號(hào) register.regexpPhone = function(phone){ return /^1[3|4|5|7|8]\d{9}$/.test(phone); }
以上這篇js監(jiān)聽input輸入框值的實(shí)時(shí)變化實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
swiperjs實(shí)現(xiàn)導(dǎo)航與tab頁的聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了swiperjs實(shí)現(xiàn)導(dǎo)航與tab頁的聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的使用鍵盤控制人物走動(dòng)實(shí)例,也可說是一個(gè)JS實(shí)現(xiàn)的小人走動(dòng)小游戲,需要的朋友可以參考下2014-08-08Bootstrap 響應(yīng)式實(shí)用工具實(shí)例詳解
Bootstrap 提供了一些輔助類,以便更快地實(shí)現(xiàn)對(duì)移動(dòng)設(shè)備友好的開發(fā)。這些可以通過媒體查詢結(jié)合大型、小型和中型設(shè)備,實(shí)現(xiàn)內(nèi)容對(duì)設(shè)備的顯示和隱藏。下面通過本文給大家分享Bootstrap 響應(yīng)式實(shí)用工具,一起看看吧2017-03-03bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了bootstrap table方法之expandRow-collapseRow展開或關(guān)閉當(dāng)前行數(shù)據(jù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09基于Web Audio API實(shí)現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實(shí)現(xiàn)音頻可視化效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的方法
這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view實(shí)現(xiàn)自動(dòng)滾動(dòng)到最底部的相關(guān)資料,在uniapp日常開發(fā)的過程中經(jīng)常會(huì)有局部滾動(dòng)的需求,而scroll-view組件正好可以滿足這一需求,需要的朋友可以參考下2023-10-10解決layer.confirm快速點(diǎn)擊會(huì)重復(fù)觸發(fā)事件的問題
今天小編就為大家分享一篇解決layer.confirm快速點(diǎn)擊會(huì)重復(fù)觸發(fā)事件的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加,修改,刪除功能(推薦)
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加,修改,刪除功能(推薦)的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06