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

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. [luogu3359]改造异或树

    [luogu3359]改造异或树 luogu 和之前某道题类似只有删边的话考虑倒着加边 但是怎么统计答案呢? 我们考虑以任意点为根dfs一遍求出每个点到根的路径异或和s[i] 这样任意两点x,y的路径 ...

  2. spring mvc 基本原理

    在web.xml配置spring mvc入口servlet: <servlet> <servlet-name>mvc-dispatcher</servlet-name&g ...

  3. Spring 拦截器——HandlerInterceptor

    采用Spring拦截器的方式进行业务处理.HandlerInterceptor拦截器常见的用途有: 1.日志记录:记录请求信息的日志,以便进行信息监控.信息统计.计算PV(Page View)等. 2 ...

  4. 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例(转载)

     前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...

  5. ob 函数讲解

    ob的基本原则:如果ob缓存打开,则echo的数据首先放在ob缓存.如果是header信息,直接放在程序缓存.当页面履行到最后,会把ob缓存的数据放到程序缓存,然后依次返回给涉猎器.下面我说说ob的基 ...

  6. 快照COW

    What is Copy-on-write? Copy-on-write      Copy-on-write (sometimes referred to as "COW") i ...

  7. bd存储

    var sessionData = new Array();var setSessionData=function(key,val){ if(sessionStorage){ sessionStora ...

  8. 2django 视图与网址进阶

    一.在网页中做加减法 采用/add/?a=11&b=22这样get方法进行 django-admin.py startproject zqxt_views cd zqxt_views pyth ...

  9. rewrite_static

    <?php class MyObject { public static $myStaticVar = 0; function myMethod() { self::$myStaticVar + ...

  10. 3.16课·········C#小结

    //附加//C#源码,被C#编译器,编译成执念代码(IL)//int16=short.....±32000//int32=int.......±21亿//int64=long......±922亿亿3 ...