html5 input输入实时检测以及延时优化


Posted in HTML / CSS onJuly 18, 2018

有个项目是,这么个情况,输入框,实时监测输入,触发请求。

第一想法是input 上的onchange()方法,试了一下,不好用,是值等更改确认了,才会触发,不即时。

上网查了一下,

$("#fix").on('input propertychange', function(event){
});

方法的确可以用,但是实时更改。发送的频率有点快啊。

赶紧加个定时器setTimeout.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟0.5s执行
                   console.log($("#fix").val())
        },500);
});

问题又来了,定时器是异步,虽然延迟,但是还会执行,没啥改变。

后来又想到解绑unbind,bind,但是解绑的时间里获取不到键盘输入的事件。

当时第一想法是,触发事件-删除定时器-添加定时器-执行函数。发现还是不好,定时器删不掉,干脆就不执行了。

最后上网查了一下,发现一种新方法。

时间戳法。

原理就是,每次输入修改全局变量,时间戳,延迟0.5s监测 新的时间戳和和绑定的时间戳相等,就进行下一步。

-----html-----

<input type="text" id="fix">
------script-----
var last;
$("#fix").on('input propertychange', function(event){
    //"#fix为你的输入框
       last = event.timeStamp;
       //利用event的timeStamp来标记时间,这样每次事件都会修改last的值,注意last必需为全局变量
       setTimeout(function(){    //设时延迟0.5s执行
            if(last-event.timeStamp==0)
               //如果时间差为0(也就是你停止输入0.5s之内都没有其它的keyup事件发生)则做你想要做的事
              {
                   console.log($("#fix").val())
               }
        },500);
});

总结

以上所述是小编给大家介绍的html5 input输入实时检测以及延时优化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 #HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 #HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 #HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 #HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 #HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 #HTML / CSS
You might like
十天学会php之第一天
2006/10/09 PHP
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
javascript 二维数组的实现与应用
2010/03/16 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python多继承顺序实例分析
2018/05/26 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
历史专业个人求职信分享
2013/12/20 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
小学母亲节活动总结
2015/02/10 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL