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调试说明
Jun 07 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
vue 组件中slot插口的具体用法
Apr 03 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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的宝库目录--PEAR
2006/10/09 PHP
php生成文件
2007/01/15 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
JS数组求和的常用方法实例小结
2019/01/07 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python脚本实现验证码识别
2018/06/07 Python
基于python实现聊天室程序
2018/07/27 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
快速查找Python安装路径方法
2020/02/06 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python怎么删除缓存文件
2020/07/19 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
PHP如何删除一个Cookie值
2012/11/15 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
Linux的主要特性
2016/09/03 面试题
资产经营总监岗位职责
2013/12/04 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
简历上的自我评价
2014/02/03 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
oracle索引总结
2021/09/25 Oracle