本文介绍在移动端实现输入框实时监听的两种方案。针对PC端传统事件在移动端的兼容与体验问题，对比了基于定时器的长度判断与jQuery的input/propertychange事件。重点解析利用propertychange结合正则校验实现手机号输入实时高亮按钮的完整代码逻辑。
移动端输入监听的传统痛点
在PC端，监听输入框通常可以使用focus、blur、hover或onkeyup等事件。然而在移动端，这些传统事件会导致极差的用户体验，因为用户必须收起键盘并点击空白处才能触发，且不同设备间存在显著的兼容差异。
基于定时器的长度判断方案
方案一
此前处理一个简易模糊搜索框需求时，思路是设置一个约1秒执行的定时器。定时器逻辑为判断文本框内容的长度，若与上一次记录的长度发生变化，则执行查询；若长度无变化，则不执行任何操作。
基于jQuery事件监听的优化方案
方案二
利用jQuery提供的input和propertychange事件进行监听，同样通过判断文本框长度变化来执行查询操作。
显然，若仅做类似实时响应的模糊查询，上述两种方案效果相近。但若需实现如图所示的功能，方案二则是更优选择。
如上图所示，每次在文本框输入内容时即实时打印文本长度。当长度满足11位且正则校验为正确手机号时，“获取验证码”按钮高亮，且点击事件生效。这是移动端注册类发短信常用的功能，核心代码如下：
手机号实时校验与按钮状态控制实现
.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="请输入您的手机号">
$(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:'请输入正确手机号'});
return;
}
$('#getCodeBtn').removeClass('not-active').addClass('code-highlight');
self.options.tel = true;
}else{
$('#getCodeBtn').addClass('not-active').removeClass('code-highlight');
self.options.tel = false;
}
}
})重点在于jQuery提供的input和propertychange这两个事件。如果觉得可行，不妨改善现有的发短信功能，以前我也是用的blur事件。
以上所述是小编给大家介绍的JS实现移动端实时监听输入框变化的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！