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监测 新的时间戳和和绑定的时间戳相等,就进行下一步。
------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输入实时检测以及延时优化的更多相关文章
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- 同时绑定onpropertychange 和 oninput 事件,实时检测 input、textarea输入改变事件,支持低版本IE,支持复制粘贴
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 使用 HTML5 input 类型提升移动端输入体验
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 使用 HTML5 input 类型提升移动端输入体验(键盘)
在最近的项目中,策划老是要求我们弹出各种类型的键盘,特别是在iOS下,例如输入帐号的时候,不应该支持输入中文,该输入纯数字的时候就应该谈数字键盘等.个人觉得这些都是我们平时开发很少意识到的,虽然有些刁 ...
- 使用 HTML5 input 类型提升移动端输入体验(转翻译)
在过去的几年里,在移动设备上浏览网页已变得难以置信的受欢迎. 但是这些设备上的浏览体验,有时遗留很多的有待改进.当涉及到填写表单时,这一点尤为明显.幸运的是,HTML5规范引入了许多新input类型, ...
- 利用input event 实时监听input输入的内容
<div id="addNumber"> <p>How many people would you like to invite?</p> &l ...
- 小程序中监听textarea或者input输入的值动态改变data中数组的对象的值
Page({ data: { todoLists:[ { detail:"", date:"", location:"", priority ...
- HTML5日期输入类型(date)
在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件.这几乎是无可争 ...
随机推荐
- Python核心编程笔记 第三章
3.1 语句和语法 3.1.1 注释( # ) 3.1.2 继续( \ ) 一般使用换行分隔,也就是说一行一个语句.一行过长的语句可以使用反斜杠( \ ) 分 ...
- APP数据的爬取
前言 App 的爬取相比 Web 端爬取更加容易,反爬虫能力没有那么强,而且数据大多是以 JSON形式传 输的,解析更加简单.在 Web 端,我们可以通过浏览器的开发者工具监听到各个网络请求和响应过程 ...
- java 数组中的方法
//要import java.util.Arrays: fill(int[] a,int value);//对a数组进行全部用value填充 fill(int[] a,int fromIndex,in ...
- Eclipse 开发设置编码格式--4个修改地方完美
背景:本人用这么久,因为大部分都是设定为UTF-8 就可以了,但是一些老项目居然是GBK格式,所以 工作空间.通常文件类型的编码都是UTF-8. 针对特殊项目设定特定格式,实际中本人对整个项目设定并不 ...
- Leetcode-1.两数之和
题目描述: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数 ...
- centos7 把终端显示改为英文/中文
把终端显示改为英文: 1.先备份语言配置文件 cp /etc/locale.conf /home/locale.conf.backup 2.打开配置文件 vim /etc/locale.conf 3. ...
- linux的cron
linux系统由cron(crond)这个系统服务来控制的,linux系统上原来有非常多的计划性工作,因此,这个系统服务是默认启动的.cron进程每分钟会定期检查是否有要执行的任务,如果有就自动执行该 ...
- Nginx命令行控制
在Linux中,需要使用命令行来控制Nginx服务器的启动与停止.重载配置文件.回滚日志文件.平滑升级等行为.默认情况下,Nginx被安装在目录usrlocal/nginx/中,其二进制文件路径为us ...
- 从头开始学Maven【依赖范围】
例如 <dependencies> <dependency> <groupId></groupId> <artifactId></ar ...
- video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...