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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 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 读取和编写 XML
2014/11/19 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
Javascript缓存API
2016/06/14 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
urllib2自定义opener详解
2014/02/07 Python
Python实现partial改变方法默认参数
2014/08/18 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
大学毕业感言
2014/01/10 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers