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 相关文章推荐
学习ExtJS(一) 之基础前提
Oct 07 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
vue无限轮播插件代码实例
May 10 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
使用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变量引用的面试题
2010/08/08 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
python中私有函数调用方法解密
2016/04/29 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python字典DICT类型合并详解
2017/08/17 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
查看django版本的方法分享
2018/05/14 Python
python实现排序算法解析
2018/09/08 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
校班主任推荐信范文
2013/12/03 职场文书
大学自我鉴定范文
2013/12/26 职场文书
计算机学生求职信范文
2014/01/30 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
党员群众路线承诺书
2014/05/20 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
农村党员干部承诺书
2015/05/04 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python