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 遮罩层和加载效果代码
Aug 01 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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下网站防IP攻击代码,超级实用
2010/10/24 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
使用python实现扫描端口示例
2014/03/29 Python
爬山算法简介和Python实现实例
2014/04/26 Python
Python 基础教程之包和类的用法
2017/02/23 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Python笔记之观察者模式
2019/11/20 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
毕业生就业协议书
2014/04/11 职场文书
警示教育活动总结
2014/05/05 职场文书
新教师培训方案
2014/06/08 职场文书
药品营销策划方案
2014/06/15 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
小学少先队活动总结
2015/05/08 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技