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 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 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正则走开
2008/03/15 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python实现控制COM口的示例
2019/07/03 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python join()函数原理及使用方法
2020/11/14 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
农场厂长岗位职责
2013/12/28 职场文书
平安建设实施方案
2014/03/19 职场文书
励志演讲稿500字
2014/08/21 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
Moment的feature导致线上bug解决分析
2022/09/23 Javascript