关于onpropertychange与oninput的兼容问题
关于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的兼容问题的更多相关文章
- 兼容Firefox和IE的onpropertychange事件oninput
原文 兼容Firefox和IE的onpropertychange事件oninput onpropertychange能够捕获每次输入值的变化.例如:对象的value值被改变时,onpropertych ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- 使用 onpropertychange 和 oninput 检测 input、textarea输入改变
检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...
- 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
- 监听HTML input输入框值的即时变化onpropertychange、oninput兼容IE,Chrome,FF,Opera等
转自:http://blog.csdn.net/itchiang/article/details/7769337 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增 ...
- JS监听输入框值变化兼容 onpropertychange、oninput
onpropertychange 属IE oninput 属除IE外(Chrome.Firefox.SS) 所以肯简单的办法嘛: 1. 一个input里面写两个属性事件 2.写在JS中判断浏览器添加监 ...
- asp.net，监听输入框值的即时变化onpropertychange、oninput
作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 ...
- onchange onpropertychange 和 oninput 事件的区别
onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发. onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是 ...
- 总结oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
随机推荐
- 编译Boost 详细步骤
vs2008编译boost [一.Boost库的介绍] Boost库是一个经过千锤百炼.可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的发动机之一. Boost库由C++标准委员会 ...
- React/React Native的 ES5 ES6 写法对照
ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React; import Re ...
- [转]hibernate主键生成策略
1.自动增长identity 适用于MySQL.DB2.MS SQL Server,采用数据库生成的主键,用于为long.short.int类型生成唯一标识使用SQL Server 和 MySQL 的 ...
- javaweb分页思想
web上的分页分析 在web编写中的经常会遇到,数据需要分页的情况.当数据量不是很大的时候. 可以直接使用js来分页.可以很好的提高性能.简化代码.数据量大的时候.还是需要使用java的分页类 ...
- iOS学习之界面间传值
/** * 界面间传值步骤 1.界面传值第一种场场景:从前往后传值. 秘诀:属性传值.(葵花宝典). 招式:(1).在后一个界面定义属性,属性的类型和传出数据类型一致. (2).在进入下一界面之前, ...
- 黑马程序员——读取Plist文件
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ 读取Plist文件 一:新建一个plist文件,并将plist文件数据填入plist文件中,这里pli ...
- Google机器学习笔记（七）TF.Learn 手写文字识别
转载请注明作者:梦里风林 Google Machine Learning Recipes 7 官方中文博客 - 视频地址 Github工程地址 https://github.com/ahangchen ...
- 数组对象-new Array
声明空数组 var arr = new Array(); 声明指定长度的数组 var arr = new Array(5) 声明初始值的数组 var a ...
- boostrap 弹出模态对话框，点击黑色区域不会关闭
$('#ID_ReformDetail').modal({ backdrop: 'static', keyboard: false }); 弹出模态对话框且点击黑色部分不会关闭. <div cl ...
- UIViewController的生命周期及iOS程序执行顺序
UIViewController的生命周期及iOS程序执行顺序 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc ...