JS实现了移动终端实时监控输入框变化的示例代码

如果是在pc端，你在监控输入框的时候可能会想到对焦、模糊、悬停、onkeyup等事件，但是如果在移动端使用这些事件，用户体验就非常差了，因为你希望用户在键盘生效之前先把键盘收起来，点一个空格，甚至会有很大的兼容性差异。那么如何解决呢？

方案一

过去制作一个简单的模糊搜索框的一般思路是定义一个定时器，大约1秒后执行。定时器功能中的逻辑是判断文本框内容的长度。如果与上次相比有任何变化，请完成查询。如果没有变化，不要执行任何操作。

备选方案2

使用jquery提供的input propertychange事件进行监控，同时判断文本框长度的变化并执行查询操作。

显然，如果做类似实时响应的模糊查询，看起来两种方案是相似的，但如果想实现下面渲染的功能，第二种方案是最优选的

如上图所示，当我在文本框中输入内容时，文本长度会实时打印出来。当长度满足11且定期检查是正确的手机号码时，“获取验证码”按钮高亮显示，点击事件生效。这是手机注册类发送短信的常用功能，核心代码如下：code-highlight { background-color : # EBA 612；}.代码只读{ background-color : # 262523；}.非活动{ background-color : # aca9a 7；} input class=' Li-input ' type=' tel ' autocomplete=' off ' name=' telinput ' id=' telinput ' placeholder='请输入您的手机号码' $(文档)。on ('input property change '，' #telInput '，function(e){ if(e . type==' input ' | | e . original event . property name==' value '){ console . log(this . value . length)if(this . value . length==11){ var myreg=/^1\d{10}$/；if(！迈勒格。测试(这个。value)) {common。提示({msg: '请输入正确的手机号码' })；返回；} $('#getCodeBtn ')。removeClass('非活动')。addCLaSS(' code-highlight ')；self . options . tel=true；}else{ $('#getCodeBtn ')。addClass('非活动')。remove CLaSS(' code-highlight ')；self . options . tel=false；}}})重点是jquery提供的输入propertychange的事件。如果你认为可以，你可能希望改进现有的短信。我以前用过模糊事件。

以上是边肖介绍的JS实时监控移动终端上输入框变化的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！