输入框input内容变化与onpropertychange事件的兼容
一.输入框常用的几个事件
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onpaste | 粘贴 |
oncopy | 复制 |
oncut | 剪切 |
下面对以上几个事件进行监听
var events = [
'keyup','keydown','copy','paste','input','blur','focus','keypress','change'
]; for(var i in events){
(function(i){
$addEvent(textarea,events[i], function(e){
console.log('event:' + events[i],e);
});
})(i);
}
总结:
(1)关于blur focus事件 ,都只会触发一次,什么意思呢,就是你点击输入框后,会触发一次focus事件,你在输入框中再怎么点都不会触发第二次focus。blur 同理。
(2)关于keydown 和 keyup,在输入框输入文字时,首先触发keydown → keypress → input → keyup 事件。
(3)关于change事件,在火狐和chrome 下面用户在输入框输入文字后,输入框才会触发change事件,然后紧接着是失去焦点(blur)事件。
(4)面对特殊字符的表现
shift、control 只有keydown → keyup 两个事件,因为不会改变输入框内容,所以没有 input 事件
caps lock 火狐下面 只有keydown 事件,chrome 可以判断是按下普通状态还是按下状态,给出的分别的keyup 和 keydown 事件。
delete 如果删除了输入框的文字,触发的事件为
keydown → keypress(keypress事件在chrome 下面有,火狐没有) → input → keyup 事件
如果文字已经全删除,再次按delete 触发的事件只有keydown → keyup 事件
总之:
只有输入框中的文字内容变化了,input 事件才会被触发。
基本上keydown 和 keyup 就可以监听文本的变化了,但是无法监听到复制、粘贴事件(非快捷键)
(5)输入法开启时
输入的过程中不会出现keypress事件,触发的是keydown → input → keyup 事件
(6)onpropertychange 方法只能用在IE中,所以在判断一个输入框中内容改变时,需要兼容IE 以及非IE 问题
(7)程序控制输入框属性(height, value , innerHTML)
在IE 中使用onpropertychange 可以很好的进行捕获。
在非IE 中无法捕获。
二.需求
现在问题来了,如何实时监听输入框的输入内容呢?
方案一: 对IE 监听onpropertychange事件,非IE 使用input 事件
var ua = navigator.userAgent.toLowerCase();
var isIE = /msie/.test(ua);
var node = document.getElementById('input');
var func = function(){
//TODO
}
if(isIE){
node.attachEvent('onpropertychange', function(){
if(window.event.propertyName == 'value'){
//func();
}
});
} else{
node.addEventListener('input',func, false);
}
方案二:
不区别浏览器,判断 'keyup', 'paste', 'cut', 'mousedown', 'mouseup', 'keydown', 'focus' 事件
//密集操作延时处理,减轻计算压力
$each(['keyup', 'paste', 'cut', 'mousedown', 'mouseup', 'keydown', 'focus'], function (event, index) {
$addEvent(node, event, function () {
clearTimeout(me._checkTimer);
me._checkTimer = setTimeout(function () {
me._checkInput();
}, 500);
});
});
输入框input内容变化与onpropertychange事件的兼容的更多相关文章
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- 关于Input内容改变的触发事件
1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <se ...
- input 内容改变的触发事件
1. onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <s ...
- input 内容发生改变时触发事件
oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失 ...
- oninput、onchange与onpropertychange事件的区别, 与input输入框实时检测
这几天项目着急,同时也学到好多以前没有接触过的知识.oninput.onchange与onpropertychange事件的区别, 与input输入框实时检测 onchange事件只在键盘或者鼠标操作 ...
- input输入框内容变化实时监听
js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...
- 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...
- input标签内容改变触发的事件
原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
随机推荐
- [luogu3359]改造异或树
[luogu3359]改造异或树 luogu 和之前某道题类似只有删边的话考虑倒着加边 但是怎么统计答案呢? 我们考虑以任意点为根dfs一遍求出每个点到根的路径异或和s[i] 这样任意两点x,y的路径 ...
- spring mvc 基本原理
在web.xml配置spring mvc入口servlet: <servlet> <servlet-name>mvc-dispatcher</servlet-name&g ...
- Spring 拦截器——HandlerInterceptor
采用Spring拦截器的方式进行业务处理.HandlerInterceptor拦截器常见的用途有: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV(Page View)等. 2 ...
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例(转载)
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...
- ob 函数讲解
ob的基本原则:如果ob缓存打开,则echo的数据首先放在ob缓存.如果是header信息,直接放在程序缓存.当页面履行到最后,会把ob缓存的数据放到程序缓存,然后依次返回给涉猎器.下面我说说ob的基 ...
- 快照COW
What is Copy-on-write? Copy-on-write Copy-on-write (sometimes referred to as "COW") i ...
- bd存储
var sessionData = new Array();var setSessionData=function(key,val){ if(sessionStorage){ sessionStora ...
- 2django 视图与网址进阶
一.在网页中做加减法 采用/add/?a=11&b=22这样get方法进行 django-admin.py startproject zqxt_views cd zqxt_views pyth ...
- rewrite_static
<?php class MyObject { public static $myStaticVar = 0; function myMethod() { self::$myStaticVar + ...
- 3.16课·········C#小结
//附加//C#源码,被C#编译器,编译成执念代码(IL)//int16=short.....±32000//int32=int.......±21亿//int64=long......±922亿亿3 ...