关于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 ...
随机推荐
- [Python shelve模块Error]bsddb.db.DBPageNotFoundError: (-30986, 'DB_PAGE_NOTFOUND: Requested page not found')
在用scrapy抓数据,用shelve保存时出现了这个Error,目标是储存一串unicode字符串组成的列表,exception代码是tempbase['joke']=joke_list,测试只要j ...
- 爬虫框架YayCrawler
爬虫框架YayCrawler 各位好!从今天起,我将用几个篇幅的文字向大家介绍一下我的一个开源作品——YayCrawler,其在GitHub上的网址是:https://github.com/liush ...
- LeetCode_Sort Colors
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...
- 转:SVN 出现This client is too old to work with working copy...错误
本地进行SVN客户端版本更新,但是之前一些代码是用的旧svn客户端提交的,这时候进行代码更新或者提交代码可能会出现错误,我这边是NetBeans中提交代码就出现了以下错误:This client is ...
- c# aes 加密解密
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- ios 导航栏和旋屏
1,状态栏(UIStatusBar) http://my.oschina.net/shede333/blog/304560 2,visibleViewController和topViewControl ...
- add BOM to fix UTF-8 in Excel
fputs($fp, $bom =( chr(0xEF) . chr(0xBB) . chr(0xBF) ));
- python高级编程(第12章:优化学习)3
#微观剖析 ''' 当找到速度很慢函数时,有时还需要做到测试某个部分函数剖析工作,这需要通过手动对一部分代码速度测试完成 ''' """ import tempfile, ...
- [置顶] LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句
LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句 declare @sql varchar(4000), @dirpath varch ...
- CDN云主机与传统虚拟主机功能对比
CDN云主机与传统虚拟主机功能对比 传统的虚拟主机都是单台服务器,一旦机器硬件损坏.IP被封.机房网络故障等,都将导致网站不能访问,严重的情况数据还无法及时取回,即使想换一家服务商也因为没有数据而无能 ...