html5 input键入即时检验和延时提升

日期:2020-10-10 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

有个新项目是,这么个状况,键入框,即时监测键入,开启恳求。

第1念头是input 上的onchange()方式,试了1下,不太好用,是值等变更确定了,才会开启,不及时。

上网查了1下,

$("#fix").on('input propertychange', function(event){
});

方式确实能够用,可是即时变更。推送的频率有点快啊。

赶快加个定时执行器setTimeout.

$("#fix").on('input propertychange', function(event){
   setTimeout(function(){    //延迟时间0.5s实行
                   console.log($("#fix").val())
        },500);
});

难题又来了,定时执行器是多线程,尽管延迟时间,可是还会实行,没啥更改。

后来又想起解绑unbind,bind,可是解绑的時间里获得不到电脑键盘键入的恶性事件。

那时候第1念头是,开启恶性事件-删掉定时执行器-加上定时执行器-实行涵数。发现還是不太好,定时执行器无法删除,果断就不实行了。

最终上网查了1下,发现1种新方式。

時间戳法。

基本原理便是,每次键入改动全局性自变量,時间戳,延迟时间0.5s监测 新的時间戳和和关联的時间戳相同,就开展下1步。

-----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键入即时检验和延时提升,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!