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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
vue实现路由切换改变title功能
May 28 Javascript
js实现三角形粒子运动
Sep 22 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
js 文件引入实现代码
2010/04/23 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
python多进程操作实例
2014/11/21 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
学校运动会广播稿范文
2014/10/02 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
贷款工作证明模板
2015/06/12 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
jquery插件实现代码雨特效
2021/04/24 jQuery
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js