如果是在pc端，監(jiān)聽輸入框你可能想到focus、blur、hover、onkeyup這些事件，但是如果是在移動(dòng)端使用使用這些事件用戶體驗(yàn)極差，因?yàn)槟阋脩羰掌疰I盤并且再點(diǎn)個(gè)空白處才生效，甚至還存在很大的兼容差異。那么怎么解決呢？

方案一

以前做一個(gè)簡(jiǎn)單的模糊搜索框的需求，大致思路是定義一個(gè)1s左右執(zhí)行的定時(shí)器，定時(shí)器函數(shù)里面的邏輯是 判斷文本框內(nèi)容的長(zhǎng)度，如果跟上一次長(zhǎng)度有變化，就走一遍查詢，如果沒有變化不執(zhí)行任何操作。

方案二

利用jquery提供的 input propertychange 事件監(jiān)聽，同時(shí)也是判斷文本框長(zhǎng)度變化，執(zhí)行查詢操作。

顯然如果做類似實(shí)時(shí)響應(yīng)的模糊查詢時(shí)，貌似兩個(gè)方案都差不多，但是如果要實(shí)現(xiàn)下面這個(gè)效果圖的功能時(shí)方案二是最優(yōu)選

如上效果圖，沒次我在文本框輸入內(nèi)容即實(shí)時(shí)打印文本長(zhǎng)度，當(dāng)長(zhǎng)度滿足11且正則校驗(yàn)是正確手機(jī)號(hào)時(shí)，“獲取驗(yàn)證碼”按鈕高亮，且點(diǎn)擊事件生效。這是移動(dòng)端注冊(cè)類發(fā)短信常用的功能，核心代碼如下:

.code-highlight {  background-color: #eba612;}.code-readonly {  background-color: #262523;}.not-active {  background-color: #aca9a7;}<input class="li-input" type="tel" autocomplete='off' name="telInput" id="telInput" placeholder="請(qǐng)輸入您的手機(jī)號(hào)">$(document).on('input propertychange','#telInput',function (e) {  if (e.type === "input" || e.orignalEvent.propertyName === "value") {    console.log(this.value.length)    if(this.value.length == 11){      var myreg = /^1/d{10}$/;      if(!myreg.test(this.value)){        common.tips({msg:'請(qǐng)輸入正確手機(jī)號(hào)'});        return;      }      $('#getCodeBtn').removeClass('not-active').addClass('code-highlight');      self.options.tel = true;    }else{      $('#getCodeBtn').addClass('not-active').removeClass('code-highlight');      self.options.tel = false;    }  }})

重點(diǎn)是jquery提供的input propertychange這個(gè)事件，如果覺得可以，不妨改善下現(xiàn)有的發(fā)短信吧，以前我也是用的blur事件..

以上所述是小編給大家介紹的JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽輸入框變化的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！