hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

html5 input输入及时检测以及延时优化【html5教程】

2019-11-26HTML搜搜PHP网68°c
A+ A-
这篇文章重要引见了html5 input输入及时检测以及延时优化题目,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。

有个项目是,这么个状况,输入框,及时监测输入,触发要求。

第一主意是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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
html5 input输入及时检测以及延时优化【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: