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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 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 各种排序算法实现代码
2009/08/20 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
零基础php编程好学吗
2019/10/11 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
文本加密解密
2006/06/23 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
初探nodeJS
2017/01/24 NodeJs
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
pycharm显示远程图片的实现
2019/11/04 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python map及filter函数使用方法解析
2020/08/06 Python
python selenium xpath定位操作
2020/09/01 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
学历公证书范本
2014/04/09 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
公司行政管理制度范本
2015/08/05 职场文书
七年级思品教学反思
2016/02/20 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫