JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的實(shí)例代碼
如果是在pc端，監(jiān)聽(tīng)輸入框你可能想到focus、blur、hover、onkeyup這些事件，但是如果是在移動(dòng)端使用使用這些事件用戶體驗(yàn)極差，因?yàn)槟阋脩羰掌疰I盤(pán)并且再點(diǎn)個(gè)空白處才生效，甚至還存在很大的兼容差異。那么怎么解決呢？
方案一
以前做一個(gè)簡(jiǎn)單的模糊搜索框的需求，大致思路是定義一個(gè)1s左右執(zhí)行的定時(shí)器，定時(shí)器函數(shù)里面的邏輯是 判斷文本框內(nèi)容的長(zhǎng)度，如果跟上一次長(zhǎng)度有變化，就走一遍查詢，如果沒(méi)有變化不執(zhí)行任何操作。
方案二
利用jquery提供的 input propertychange 事件監(jiān)聽(tīng)，同時(shí)也是判斷文本框長(zhǎng)度變化，執(zhí)行查詢操作。
顯然如果做類似實(shí)時(shí)響應(yīng)的模糊查詢時(shí)，貌似兩個(gè)方案都差不多，但是如果要實(shí)現(xiàn)下面這個(gè)效果圖的功能時(shí)方案二是最優(yōu)選
如上效果圖，沒(méi)次我在文本框輸入內(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è)事件，如果覺(jué)得可以，不妨改善下現(xiàn)有的發(fā)短信吧，以前我也是用的blur事件..
以上所述是小編給大家介紹的JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
今天與同事一起看了一個(gè)javscript定義函數(shù)問(wèn)題，如何在定義一個(gè)函數(shù)里給參數(shù)一個(gè)默認(rèn)值.2011-07-07
jQuery實(shí)現(xiàn)可收縮展開(kāi)的級(jí)聯(lián)菜單實(shí)例代碼
這篇文章主要是對(duì)利用jQuery實(shí)現(xiàn)可收縮展開(kāi)的級(jí)聯(lián)菜單的實(shí)例代碼進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11![JavaScript switch case 的用法實(shí)例[范圍]](http://img.jbzj.com/images/xgimg/bcimg2.png)
JavaScript switch case 的用法實(shí)例[范圍]
JavaScript switch case 的用法實(shí)例，大家可以參考下。2009-09-09
使用JS輕松實(shí)現(xiàn)ionic調(diào)用鍵盤(pán)搜索功能(超實(shí)用)
這篇文章主要介紹了使用JS輕松實(shí)現(xiàn)ionic調(diào)用鍵盤(pán)搜索功能(超實(shí)用)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
使用bootstrapValidator插件進(jìn)行動(dòng)態(tài)添加表單元素并校驗(yàn)
動(dòng)態(tài)添加表單元素，并調(diào)用bootstrapValidator的方法為表單添加校驗(yàn)規(guī)則，調(diào)用addField()方法實(shí)現(xiàn)功能。下面通過(guò)本文看下具體實(shí)現(xiàn)方法吧2016-09-09
safari,opera嵌入iframe頁(yè)面cookie讀取問(wèn)題解決方法
最近做的合作網(wǎng)站嵌入到對(duì)方的iframe中去，在safari,opera和有些版本的搜狗瀏覽器（內(nèi)核版本原因）中不能讀到cookie。2010-06-06
基于jQuery通過(guò)jQuery.form.js插件使用ajax提交form表單
在jQuery Form插件可以讓你很容易的使用AJAX提交Form表單，主要方法ajaxForm和ajaxSubmit負(fù)責(zé)收集表單元素的信息,管理提交進(jìn)程。這兩種方法都是可配置的,讓你完全控制Form提交，本篇文章介紹基于jQuery通過(guò)jQuery.form.js插件使用ajax提交form表單，需要的朋友可以參考下2015-08-08
uniapp介紹與使用以及小程序?qū)崟r(shí)獲取視頻播放時(shí)間
這篇文章主要給大家介紹了關(guān)于uniapp介紹與使用以及小程序?qū)崟r(shí)獲取視頻播放時(shí)間的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
值得分享的輕量級(jí)Bootstrap Table表格插件