博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端实时监听输入框变化
阅读量:6271 次
发布时间:2019-06-22

本文共 1324 字,大约阅读时间需要 4 分钟。

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

方案一

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

方案二

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

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

834823-20170411114028204-1960828642.gif

如上效果图,没次我在文本框输入内容即实时打印文本长度,当长度满足11且正则校验是正确手机号时,“获取验证码”按钮高亮,且点击事件生效。这是移动端注册类发短信常用的功能,核心代码如下:

.code-highlight {    background-color: #eba612;}.code-readonly {    background-color: #262523;}.not-active {    background-color: #aca9a7;}$(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事件..

转载于:https://www.cnblogs.com/liliangel/p/6699419.html

你可能感兴趣的文章
echarts图表初始大小问题及echarts随窗口变化自适应
查看>>
Inherits、CodeFile、CodeBehind的区别
查看>>
创建一个SimpleDlg
查看>>
使用XML生成菜单
查看>>
udp,tcp对于socket的写法
查看>>
第二周个人赛
查看>>
推断Windows版本号新方法
查看>>
2017-4-18 ADO.NET
查看>>
RSuite 一个基于 React.js 的 Web 组件库
查看>>
技术博客网址收藏
查看>>
python 金融分析学习
查看>>
授人以渔不如授人以鱼
查看>>
matlab练习程序(图像Haar小波变换)
查看>>
【Java】从域名得到ip
查看>>
Mysql索引会失效的几种情况分析
查看>>
LVM逻辑卷
查看>>
zoj3591 Nim(Nim博弈)
查看>>
canvas绘图
查看>>
poj - 3039 Margaritas on the River Walk
查看>>
bootstrap(5)关于导航
查看>>