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 相关文章推荐
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
js jquery数组介绍
2012/07/15 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python selenium firefox使用详解
2019/02/26 Python
如何获取Python简单for循环索引
2019/11/21 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
编写python代码实现简单抽奖器
2020/10/20 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
公司员工检讨书
2014/02/08 职场文书
学校对教师的评语
2014/04/28 职场文书
总经理任命书范本
2014/06/05 职场文书
学生党员检讨书范文
2014/12/27 职场文书
同意报考公务员证明
2015/06/17 职场文书
消防安全培训工作总结
2015/10/23 职场文书
计算机实训心得体会
2016/01/14 职场文书