有个项目是,这么个状况,输入框,及时监测输入,触发要求。
第一主意是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输入及时检测以及延时优化的全部内容,愿望能对人人的进修有所协助。更多相干教程请接见Html5视频教程!
相干引荐:
php公益培训视频教程
HTML5图文教程
HTML5在线手册
以上就是html5 input输入及时检测以及延时优化的细致内容,更多请关注ki4网别的相干文章!