关于onpropertychange与oninput的用法，网上一大堆，但还是有不兼容的时候，比如说，我想计下，一个input的值改变了多少次，如果写成兼容写法就为

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>onpropertychange与oninput事件</title>

    <script type="text/javascript">

    window.onload = function(){

        oTxt1 = document.getElementById('input1');

        oTxt2 = document.getElementById('input2');

        oBtn = document.getElementById('btn');

        var i=0;

        oTxt1.oninput = oTxt1.onpropertychange = function(){

            console.log(arguments.length)

            for(var j = 0; j< arguments.length; j++){

                console.log(arguments[j])

            }

            i+=1

            oTxt2.value = i

        }

        oBtn.onclick = function(event){

            var oEvent = window.event || event;

            oTxt1.setAttribute('good','hello')

        }

    }

    </script>

</head>

<body>

    <input type="text" id="input1" placeholder='请输入……'/>

    <input type="text" id="input2" placeholder='请输入……'/>

    <button value="changeProperty" id="btn">改变属性</button>

</body>

</html>

刷新浏览器，在chrome与firefox中，你会发现oTxt1的值还是为'请输入……'，而IE中，你发现为2，图如下

假如你改变一下oTxt1的值，最大的变化出现了。chrome与firefox中oTxt2的值为1，IE出现了出现了两种不同的值，IE9以下的每改变一次只会+1，但IE9及以上的由于支持oninput，所以被执行了两次，因此，会以+2的增值进行，如图： 

而且，按照网上的说法，在IE中可以根据argument来获取参数个数及参数情况，据上图，还发现，ie9中，传给回调函数一事件object，但在IE9以下，是没有参数传递的。这点也值得注意；

onpropertychange中的问题有以下几点,

1.如果设置了onpropertychange，那就改变了元素的一个属性，因此，会自动执行一次;

2.在IE9中，键盘delete删除一个字符，不会触发这个事件;

3.如果动态改变一个input（类似的）的值及属性，会触发两次事件，但可以通过event 的 propertyName 属性来获取发生变化的属性名称,进而进行下一步操作;

关于onpropertychange与oninput的兼容问题的更多相关文章

  1. 兼容Firefox和IE的onpropertychange事件oninput

    原文 兼容Firefox和IE的onpropertychange事件oninput onpropertychange能够捕获每次输入值的变化.例如:对象的value值被改变时,onpropertych ...

  2. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  3. 使用 onpropertychange 和 oninput 检测 input、textarea输入改变

    检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...

  4. 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

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

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

  6. JS监听输入框值变化兼容 onpropertychange、oninput

    onpropertychange 属IE oninput 属除IE外(Chrome.Firefox.SS) 所以肯简单的办法嘛: 1. 一个input里面写两个属性事件 2.写在JS中判断浏览器添加监 ...

  7. asp.net，监听输入框值的即时变化onpropertychange、oninput

    作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...

  8. onchange onpropertychange 和 oninput 事件的区别

    onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是 ...

  9. 总结oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

随机推荐

  1. 从配置文件中读取数据获取Connection

    配置文件 db.driver=com.mysql.jdbc.Driver db.url=jdbc\:mysql\://localhost\:3306/mybase db.user=root db.ps ...

  2. R语言画正弦曲线

    正弦曲线一个周期是2π,我们要先生成x的取值范围. 可以用seq函数生成一个等差序列,步进为0.01 x=seq( 0,  2*pi,  0.01 )   pi表示π y=sin(x) plot(x, ...

  3. 函数:Python的乐高积木 - 零基础入门学习Python017

    函数:Python的乐高积木 让编程改变世界 Change the world by program 相信大家小时候应该都玩过神奇的乐高积木,只要通过想象和创意,我们可以用它拼凑出很多神奇的东西. 随 ...

  4. [linux] linux知识积累（不断更新中…）

    一.vim知识 f(find)命令也可以用于移动,fx将找到光标后第一个为x的字符,3fd将找到第三个为d的字符. D 删除当前字符至行尾.D=d$ :split或new 打开一个新窗口,光标停在顶层 ...

  5. sql数据库监控语句

    --查找被阻塞进程 --查找阻塞头进程 and exists ( from master..sysprocesses where blocked =p.spid) --查找等待时间长的进程 order ...

  6. memcached在Windows下的安装

    memcached简介详情请谷歌.这里介绍如何在windows下安装. 1.下载     下载地址:http://download.csdn.net/detail/u010562988/9456109 ...

  7. 升级10.11后使用CocoaPod出现-bash: pod: command not found 解决办法-备

    升级10.11后,运行pod命令出现: -bash: pod: command not found 解决办法: sudo gem install -n /usr/local/bin cocoapods ...

  8. 转载收藏之用 - 微信公众平台开发教程（四）：Hello World

    这一篇文章其实可以写在很前面,不过我还是希望开发者们尽多地了解清楚原理之后再下手. 通过上一篇Senparc.Weixin.MP SDK 微信公众平台开发教程(三):微信公众平台开发验证,我们已经使微 ...

  9. Win7+CentOS双系统,最清晰细致的教程！

    Win7的系统下安装CentOS,实现双系统切换使用的目的,希望对大家有帮助. 注意: 1.由于涉及到对硬盘操作,请妥善备份数据,避免损失. 2.我的步骤是绝对正确和缺一不可的,大家一定要按照我的操作 ...

  10. vs 自动生成core dump文件

    一直以来觉着core dump这个东西很神奇,在初步学习的时候也没有个大方向,最近项目需要记录程序崩溃时的日志信息,因此在网上寻找相关的信息,此时core dump也成为了我重点关注的东西. 说说我的 ...