html5input输入实时检测以及延时优化-
发布时间:09/01 来源:未知 浏览:
关键词:
有个项目是,这么个状况,输入框,实时监测输入,触发要求。
首先设法是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-----
------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输入实时检测以及延时优化的全部内容,但愿能对大家的学习有所帮忙。更多相干教程请拜访Html5视频教程!