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 相关文章推荐
js中的异常处理try...catch使用介绍
Sep 21 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
详细聊聊vue中组件的props属性
Nov 02 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
让python json encode datetime类型
2010/12/28 Python
Python3读取zip文件信息的方法
2015/05/22 Python
查看Django和flask版本的方法
2018/05/14 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
公司综合部的成员自我评价分享
2013/11/05 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
本科毕业生自荐信
2014/06/02 职场文书
大专生找工作自荐书
2014/06/10 职场文书
信用卡工作证明模板
2014/09/14 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书