JS判断文本框内容改变事件的简单实例


Posted in Javascript onMarch 07, 2014

oninput,onpropertychange,onchange的用法

onchange触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

b)当前对象失去焦点(onblur);

onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;      

oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

停止冒泡事件

if (e) //停止事件冒泡 e.stopPropagation();
else  window.event.cancelBubble = true;

执行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。

第二、既然我们发现了这个特点,那就会有一个问题了:当我们有时在输入框值发生改变时希望执行一个函数操作,但同时也要修改一个自定义的属性,这样onpropertychange就会被触发两次,这个可能并不是我们所希望的。
猜想一下,既然提供了这么一个属性,那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容。

XML/HTML代码

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){   
alert(arguments.length);   
for(var i=0;i<arguments.length;i++){   
alert(arguments[i]);   
}   
});   
-->  
</script> 

执行上面一段代码,会发现弹出了1和[object],这说明该事件只给回调函数传入一个参数而且是object类型。
那我们就试试遍历一下这个object。

XML/HTML代码

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
for(var item in o){   
alert(item+":"+o[item]);   
}   
});   
//-->  
</script> 

执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyname,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。

XML/HTML代码

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
alert(o.propertyName);   
});   
//-->  
</script> 

分别单击文本框和输入一个值,会发现分别弹出了myprop和value。

再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
直接看代码吧:

XML/HTML代码

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">  
<script type="text/javascript">  
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){   
if(o.propertyName!='value')return;  //不是value改变不执行下面的操作   
//.......函数处理   
});   
//-->  
</script>
Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
判断脚本加载是否完成的方法
May 26 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 #Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 #Javascript
jquery单行文字向上滚动效果示例
Mar 06 #Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 #Javascript
在Firefox下js select标签点击无法弹出
Mar 06 #Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 #Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Django数据统计功能count()的使用
2020/11/30 Python
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
车间主管岗位职责
2013/11/14 职场文书
《故乡》教学反思
2014/04/10 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
先进教师个人总结
2015/02/11 职场文书
五一晚会主持词
2015/07/01 职场文书
话题作文之学会尊重
2019/12/16 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
anaconda python3.8安装后降级
2021/06/11 Python
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技