有关onpropertychange事件
- <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
- <script type="text/javascript">
- <!--
- document.getElementById('xx').attachEvent('onpropertychange',function(o){alert('ok')});
- //-->
- </script>
执行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。
第二、既然我们发现了这个特点,那就会有一个问题了:当我们有时在输入框值发生改变时希望执行一个函数操作,但同时也要修改一个自定义的属性,这样onpropertychange就会被触发两次,这个可能并不是我们所希望的。
猜想一下,既然提供了这么一个属性,那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容。
- <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
- <script type="text/javascript">
- <!--
- document.getElementById('xx').attachEvent('onpropertychange',function(){
- alert(arguments.length);
- for(var i=0;i<arguments.length;i++){
- alert(arguments[i]);
- }
- });
- //-->
- </script>
执行上面一段代码,会发现弹出了1和[object],这说明该事件只给回调函数传入一个参数而且是object类型。
那我们就试试遍历一下这个object。
- <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
- <script type="text/javascript">
- <!--
- document.getElementById('xx').attachEvent('onpropertychange',function(o){
- for(var item in o){
- alert(item+":"+o[item]);
- }
- });
- //-->
- </script>
执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyname,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。
- <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
- <script type="text/javascript">
- <!--
- document.getElementById('xx').attachEvent('onpropertychange',function(o){
- alert(o.propertyName);
- });
- //-->
- </script>
分别单击文本框和输入一个值,会发现分别弹出了myprop和value。
再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
直接看代码吧:
- <input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
- <script type="text/javascript">
- <!--
- document.getElementById('xx').attachEvent('onpropertychange',function(o){
- if(o.propertyName!='value')return; //不是value改变不执行下面的操作
- //.......函数处理
- });
- //-->
- </script>
三.让FF支持onPropertyChange类似的效果
之前做了个对input框的实时校验,比如只允许输入数字,用户输入的却是字母等,这时候就把用户输入的值变为红色等...或者对textarea文本域剩余可输入字符的提示,就遇到了一个问题,使用onPropertyChange在IE下很好很正常,但是在FF上就么效果鸟~~~
于是在网上就找到了一个可行性方法~~ Firefox有个oninput事件效果和onPropertyChange一样,所以同时加上oninput和onPropertyChange问题就解决鸟~~~ oo....
1
|
< input type = "text" oninput = "cgColor(this);" onPropertyChange = "cgColor(this);" maxlength = "4" name = "pt_bankou" id = "pt_bankou" value = "" />
|
转载于:https://www.cnblogs.com/eastday/archive/2010/01/29/1658997.html
有关onpropertychange事件相关推荐
- onpropertychange事件
document.getElementById('updatelog').attachEvent('onpropertychange', function(o) {if (o.propertyName ...
- onchange事件与onpropertychange事件的区别
onchange事件与onpropertychange事件的区别 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能还是相等的)且失去 ...
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
- JS中onpropertychange事件和onchange事件区别
2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...
- javascript中的onpropertychange事件 与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
- 解决ie8下onpropertychange事件间歇性失效的问题
有的时候onpropertychange事件一下好用,一下不好用 网上有的说去掉<!DOCTYPE html>就好了, 我试了下,虽然然管用,但doctype是推荐加上的,去掉他有些东西会 ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- oninput事件onpropertychange事件onchange事件textIput事件
oninput事件&onpropertychange事件&onchange事件&textIput事件 oninput事件 简介 input,select,textarea元素值 ...
- onchange onpropertychange 和oninput事件的区别
汇总onchange onpropertychange 和oninput事件的区别: 1.onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容 ...
- onchange onpropertychange 和 oninput 事件的区别
汇总 onchange onpropertychange 和 oninput 事件的区别 1.onchange 事件与 onpropertychange 事件的区别: onchange 事件在内容改变 ...
最新文章
- 阿里云天池大赛赛题解析――深度学习篇
- 比double精度更高的数据类型_Oracle数据类型总结
- LA3029最大子矩阵
- 百练2810:完美立方
- Netty 支持的功能与特性
- Linux scp 免密码 传输文件
- pythonfor循环列表排序_Python使用for循环对列表内元素进行排序方法
- MyEclipse修改Servlet模板
- 软件工程概论第十三周学习进度
- 面向对象之需求分析要略
- maven编译spark源码
- gb28181协议java_gb28181开发源码
- FIT2CLOUD混合云管理平台实现可扩展架构升级
- 六款顶级Wifi无线网络搜索工具盘点
- C#创建,调用WebS'ervice
- 美容院预约管理系统管理员端用例测试
- 行为管理(锐捷睿易篇)
- 贴几行汉语编程的代码
- Java kafka监控 topic的数据量count情况,每个topic的Summed Recent Offsets(总结最近的偏移量)
- Mac查看端口占用情况
热门文章
- Kubernetes初识
- maven 的 oracle的Missing artifact com.oracle:******:jar:11.2.0.2.0
- es6箭头函数使用场景导致的一些问题
- VC6.0 Dialog 如何添加 WM_ERASEBACKGROUND 消息
- (转)STM32学习笔记(3):系统时钟和SysTick定时器
- 软件2班36人[扑林作]
- 2019牛客多校第一场I Points Division(DP)题解
- CentOS7 - 给VMwear Workstation 15安装VMwear tools
- Gradle与Gradle插件
- 【转】android开发中如何结束所有的activity