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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 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生成静态HTML速度快类库
2007/03/18 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python实现的ini文件操作类分享
2014/11/20 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
小学班主任自我评价
2015/03/11 职场文书
2015年读书月活动总结
2015/03/26 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers