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

日期：2021-02-23 类型：科技新闻 

关键词：秀米制作h5，h5如何制作，h5小游戏制作，h5游戏开发，免费的h5制作网站

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

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

上一篇：手门把教你完成1个canvas智美术绘画板的方式 返回下一篇：没有了