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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
JQuery性能优化的几点建议
May 14 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
JS 判断代码全收集
2009/04/28 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Django如何自定义分页
2018/09/25 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
学校门卫岗位职责范本
2014/06/30 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
第一书记观后感
2015/06/08 职场文书
Python读写yaml文件
2022/03/20 Python