输入框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 ...
随机推荐
- 查看硬盘负载情况:iostat命令
Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...
- Sumdiv(较难数学题)
Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 20971 Accepted: 5290 Description Cons ...
- vue Element UI 导航高亮
1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值 当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了 为什么要截取呢? 因为点 ...
- 使用google的GSON解析json格式的数据
GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...
- Action获取表单数据的三种方式
1.使用ActionContext类获取 示例 获取用户提交的用户名和密码 jsp页面 action中的java代码 2.使用ServletActionContext类获取 jsp页面 Java代码 ...
- Android中关于系统Dialog无法全屏的问题(dialog样式)
自定义一个Dialog,继承了系统Dialog的样式.这时候会发现,即使布局文件中写的width和height都是match_parent,依然无法达到全屏的效果. 原因是:系统dialog的样式.默 ...
- python基础14 ---函数模块5(模块和包)
模块与包 一.模块 1.模块是怎么诞生的. 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到 不同的文 ...
- LeetCode:最长回文子串【5】
LeetCode:最长回文子串[5] 题目描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000. 示例 1: 输入: "babad" 输出: ...
- LeetCode:算法特辑——二分搜索
LeetCode:算法特辑——二分搜索 算法模板——基础 int L =0; int R =arr.length; while(L<R) { int M = (R-L)/2+L; if(arr[ ...
- NSAttributedStringKey
NSFontAttributeName; //字体,value是UIFont对象 NSParagraphStyleAttributeName;//绘图的风格(居中,换行模式,间距等诸多风格),valu ...