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 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
JavaScript函数详解
Feb 27 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
jquery validate demo 基础
Oct 29 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
JS新手入门数组处理的实用方法汇总
Apr 07 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
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
2016/06/07 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
中学生自我鉴定
2014/02/04 职场文书
超市开学活动方案
2014/03/01 职场文书
小班评语大全
2014/05/04 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
初中同学会活动方案
2014/08/22 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Pandas自定义选项option设置
2021/07/25 Python