JS实现移动端实时监听输入框变化的实例代码


Posted in Javascript onApril 12, 2017

如果是在pc端,监听输入框你可能想到focus、blur、hover、onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异。那么怎么解决呢?

方案一

以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作。

方案二

利用jquery提供的 input propertychange 事件监听,同时也是判断文本框长度变化,执行查询操作。

显然如果做类似实时响应的模糊查询时,貌似两个方案都差不多,但是如果要实现下面这个效果图的功能时方案二是最优选

JS实现移动端实时监听输入框变化的实例代码

如上效果图,没次我在文本框输入内容即实时打印文本长度,当长度满足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实现移动端实时监听输入框变化的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
详解vue的数据binding绑定原理
Apr 12 #Javascript
angular学习之ngRoute路由机制
Apr 12 #Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 #Javascript
微信小程序登录态控制深入分析
Apr 12 #Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 #Javascript
微信小程序微信支付接入开发实例详解
Apr 12 #Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 #Javascript
You might like
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
vue实现简单的星级评分组件源码
2018/11/16 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python字符串处理实例详解
2017/05/18 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
自我鉴定范文300字
2013/10/01 职场文书
生物化工工艺专业应届生求职信
2013/10/08 职场文书
求职毕业生自荐书
2014/02/08 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
批评与自我批评材料
2014/02/15 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
高一军训的心得体会
2014/09/01 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers