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 keycode总结
Feb 04 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
PHP7 其他修改
2021/03/09 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Python collections模块实例讲解
2014/04/07 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python 如何对logging日志封装
2020/12/02 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
抄作业检讨书
2014/02/17 职场文书
主题教育活动总结
2014/05/05 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
python 调用js的四种方式
2021/04/11 Python
django学习之ajax post传参的2种格式实例
2021/05/14 Python
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL