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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
element-ui 本地化使用教程详解
Oct 28 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
js实现磁性吸附的示例
Oct 26 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
js实现图片放大并跟随鼠标移动特效
2019/01/18 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
浅谈Python的文件类型
2016/05/30 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
django框架auth模块用法实例详解
2019/12/10 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python 发送邮件方法总结
2020/08/10 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
网络技术专业求职信
2014/02/18 职场文书
廉洁校园实施方案
2014/05/25 职场文书
经典团队口号大全
2014/06/21 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
终止劳动合同协议书
2014/10/05 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
告知书格式
2015/07/01 职场文书