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中this的使用说明
Sep 06 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
原生js实现轮播图特效
May 04 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中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php写app用的框架整理
2019/09/29 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
python中私有函数调用方法解密
2016/04/29 Python
python 同时读取多个文件的例子
2019/07/16 Python
python对Excel的读取的示例代码
2020/02/14 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
党委工作总结2015
2015/04/27 职场文书