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 相关文章推荐
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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
ThinkPHP模板输出display用法分析
2014/11/26 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
Python中format()格式输出全解
2019/04/12 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python已协程方式处理任务实现过程
2019/12/27 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
企业宣传标语
2014/06/09 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
党员民主生活会材料
2014/12/15 职场文书
信访维稳承诺书
2015/05/04 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书