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 border-image边框图像详解
Nov 24 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP 断点续传实例详解
2017/11/11 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
python遍历目录的方法小结
2016/04/28 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
天网工程实施方案
2014/03/26 职场文书
地震捐款倡议书
2014/08/29 职场文书
科技活动周标语
2014/10/08 职场文书
大学生在校表现评语
2014/12/31 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android