一.输入框常用的几个事件

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事件的兼容的更多相关文章

  1. 微信小程序获取输入框(input)内容

    微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

  2. 关于Input内容改变的触发事件

    1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <se ...

  3. input 内容改变的触发事件

    1. onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <s ...

  4. input 内容发生改变时触发事件

    oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失 ...

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

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

  6. input输入框内容变化实时监听

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...

  7. 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等

    转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...

  8. input标签内容改变触发的事件

    原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...

  9. 实时监听input输入框value的变化:

    HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...

随机推荐

  1. 查看硬盘负载情况:iostat命令

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同 ...

  2. Sumdiv(较难数学题)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 20971   Accepted: 5290 Description Cons ...

  3. vue Element UI 导航高亮

    1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值 当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了 为什么要截取呢? 因为点 ...

  4. 使用google的GSON解析json格式的数据

    GSON是谷歌提供的开源库,用来解析Json格式的数据,非常好用.如果要使用GSON的话,则要先下载gson-2.2.4.jar这个文件,如果是在Android项目中使用,则在Android项目的li ...

  5. Action获取表单数据的三种方式

    1.使用ActionContext类获取 示例 获取用户提交的用户名和密码 jsp页面 action中的java代码 2.使用ServletActionContext类获取 jsp页面 Java代码 ...

  6. Android中关于系统Dialog无法全屏的问题(dialog样式)

    自定义一个Dialog,继承了系统Dialog的样式.这时候会发现,即使布局文件中写的width和height都是match_parent,依然无法达到全屏的效果. 原因是:系统dialog的样式.默 ...

  7. python基础14 ---函数模块5(模块和包)

    模块与包 一.模块 1.模块是怎么诞生的. 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到 不同的文 ...

  8. LeetCode:最长回文子串【5】

    LeetCode:最长回文子串[5] 题目描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000. 示例 1: 输入: "babad" 输出: ...

  9. LeetCode:算法特辑——二分搜索

    LeetCode:算法特辑——二分搜索 算法模板——基础 int L =0; int R =arr.length; while(L<R) { int M = (R-L)/2+L; if(arr[ ...

  10. NSAttributedStringKey

    NSFontAttributeName; //字体,value是UIFont对象 NSParagraphStyleAttributeName;//绘图的风格(居中,换行模式,间距等诸多风格),valu ...