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类
Sep 08 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
原生js开发的日历插件
Feb 04 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
使用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 删除记录实现代码
2009/03/12 PHP
php动态绑定变量的用法
2015/06/16 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
详解python 注释、变量、类型
2018/08/10 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Python如何绘制日历图和热力图
2020/08/07 Python
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
2014年办公室主任工作总结
2014/11/12 职场文书
鼋头渚导游词
2015/02/05 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
JavaScript实现简单计时器
2021/06/22 Javascript
PHP中多字节字符串操作实例详解
2021/08/23 PHP
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server