有个项目是,这么个情况,输入框,实时监测输入,触发请求。

第一想法是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输入实时检测以及延时优化的更多相关文章

  1. oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测

    这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...

  2. 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  3. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  4. 使用 HTML5 input 类型提升移动端输入体验

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  5. 使用 HTML5 input 类型提升移动端输入体验(键盘)

    在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...

  6. 使用 HTML5 input 类型提升移动端输入体验(转翻译)

    在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...

  7. 利用input event 实时监听input输入的内容

    <div id="addNumber"> <p>How many people would you like to invite?</p> &l ...

  8. 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值

    Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...

  9. HTML5日期输入类型(date)

    在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件.这几乎是无可争 ...

随机推荐

  1. Arch Linux 记录

    2017.1.8 开始花了两天装 Arch Linux,因为是第一次安装 Arch Linux,所以过程中遇到许多问题,特记录如下. 安装过程及遇到的问题: 下载镜像,刻盘. 重启进入 LiveCD ...

  2. Python利用pandas处理Excel数据的应用

    Python利用pandas处理Excel数据的应用   最近迷上了高效处理数据的pandas,其实这个是用来做数据分析的,如果你是做大数据分析和测试的,那么这个是非常的有用的!!但是其实我们平时在做 ...

  3. ssm多数据源配置

    1.在.properties配置文件中 添加第二个数据源信息(type2,driver2, url2,username2,pawwword2) 2.修改spring-context.xml(src/m ...

  4. 提高MYSQL大数据量查询的速度

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  5. 医学图像数据(三)——TCIA部分数据下载方式

    前为止,本人还没有找到不需要账号的就可以部分下载的方式,因此这里讲的是需要注册账号下载部分数据的方法. 注意:下载部分数据需要注册账号 注册账号网址:https://public.cancerimag ...

  6. Input子系统与多点触摸技术-3【转】

    转自:https://blog.csdn.net/u012839187/article/details/77335941 版权声明:本文为博主原创文章,欢迎转载,转载请注明转载地址 https://b ...

  7. jmeter发起form-data格式

    两者缺一不可,等下再来研究..

  8. Gitlab_ansible_jenkins三剑客⑤jenkins Pipeline-job的使用

    Pipeline-job的使用 创建Pipeline任务 找到root用户的id 编写pipeline脚本 #!groovy pipeline{ agent {node {label 'master' ...

  9. SQLAlchemy+Flask-RESTful使用(四)

    前言 顺利出到4啦,其实学习过程中发现了不少错误,不过有些实在是没啥代表性. 最近买了两本小程序和安卓方面的书,其实从初中开始,想搞编程的目的就是写些安卓软件. 现在看来不太可能了.拿来当当兴趣爱好还 ...

  10. spool_sqlldr

    --0.制表符chr(9) 换行符chr(10) 回车符chr(13) windows下批处理.bat linux下批处理.shset echo offset feedback offset page ...