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日期选择组件.这几乎是无可争 ...
随机推荐
- IDEA中debug启动tomcat报错。Error running t8:Unable to open debugger port(127.0.0.1:49225):java.net.BindException"Address alread in use:JVM_Bind"
解决办法: 1,如下图打开项目配置的tomcat的“Edit Configurations...” 2,打开“Startup/Connection”--------"Debug"- ...
- CPM、CPC、CPA、CPS、CPL、CPR 是什么意思 -解析互联网广告术语
CPA CPS CPA/CPS常见的推广方式 CPA和CPSCPA,CPS CPS与CPA CPA.CPSCPA.CPS产品教 CPA CPS什么意思 CPACPS是什么 1. CPM(Cost p ...
- Capsules for Object Segmentation(理解)
0 - 背景 今年来卷积网络在计算机视觉任务上取得的显著成果,但仍然存在一些问题.去年Hinton等人提出了使用动态路由的新型网络结构——胶囊网络来解决卷积网络的不足,该新型结构在手写体识别以及小图像 ...
- python中的MySQL使用 + pickle使用
(1)python中有一个包“sqlite3”,可以用来进行数据库相关的操作: 参考下面一个例子: import sqlite3 import pickle img_list = [('a' , 0) ...
- linux下动态链接库(.so)的显式调用和隐式调用
进入主题前,先看看两点预备知识. 一.显式调用和隐式调用的区别 我们知道,动态库相比静态库的区别是:静态库是编译时就加载到可执行文件中的,而动态库是在程序运行时完成加载的,所以使用动态库的程序的体积要 ...
- OAuth 2.0详解
OAuth是一个关于授权(authorization)的开放网络标准,在全世界得到广泛应用,目前的版本是2.0版. 本文对OAuth 2.0的设计思路和运行流程,做一个简明通俗的解释,主要参考材料为R ...
- 微信小程序开发学习(一)
一.各种JSON配置 1.小程序配置app.json 为小程序全局配置,包括所有页面路径.界面表现.网络超时时间.底部tab等,类比APP开发中manifest配置. 2.工具配置project.co ...
- Django-路由控制
Django-路由控制 一.URL路由基础 URL是web服务的路口,用户通过浏览器发送过来的任何请求都会被发送到一个指定的URL地址里,然后被响应. 在django项目中编写路由就是向外暴露我们接收 ...
- BeanUtils.copyProperties缓解代码压力,释放双手
简单描述:之前在写代码的时候,经常把表单提交到后台的对象的参数,通过getter方法取出来,然后,再通过setter方法传递给需要的对象,代码中写了很多get set这种方法,后来听同事说,sprin ...
- maven环境搭建及创建maven项目
Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 1.maven下载地址http://maven.apache.org/download.cgi ...