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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
细说webpack6 Babel的使用详解
Sep 26 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
php格式化金额函数分享
2015/02/02 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
python元组操作实例解析
2014/09/23 Python
Python中的迭代器漫谈
2015/02/03 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
廉洁家庭事迹材料
2014/05/15 职场文书
承诺书格式范文
2014/06/03 职场文书
北京奥运会主题口号
2014/06/13 职场文书
田径运动会通讯稿
2014/09/13 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
家长会欢迎词
2015/01/23 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL