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实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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中一些可能会被忽略的问题
2013/06/21 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JS delegate与live浅析
2013/12/21 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
python如何调用百度识图api
2020/09/29 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
python基于win32api实现键盘输入
2020/12/09 Python
古驰英国官网:GUCCI英国
2020/03/07 全球购物
Shell如何接收变量输入
2012/09/24 面试题
信息管理员岗位职责
2013/12/01 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
我的中国心演讲稿
2014/09/04 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
MySQL创建管理子分区
2022/04/13 MySQL
MySQL主从切换的超详细步骤
2022/06/28 MySQL