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 写类方式之一
Jul 05 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
基于Angularjs实现分页功能
May 30 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
详解Vue底部导航栏组件
May 02 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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 过滤器实现代码
2010/08/09 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
JS中style属性
2006/10/11 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
替换python字典中的key值方法
2018/07/06 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
先进工作者个人总结
2015/02/15 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL