js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能，通常最简单最容易想到的是onkeyup和onchange事件，但是在使用onkeyup来监听键盘事件的时候，监听不到鼠标右键的粘贴、复制的操作，在处理组合键的时候也比较麻烦，所以这篇文章简单介绍一下HTML5中的 oninput 和IE专属事件 onpropertychang 来解决监听文本框值变化。
这几个事件的说明和区别：
1、onkeyup：在键盘上某个按键按下后再松开时会触发。
2、onchange：此事件触发的条件有两个
1）、当前文本框属性变化，并且是通过键盘或者鼠标来触发的。（脚本触发的无效）
2）、当前文本框失去焦点（onblur）
3、onpropertychange：顾名思义，就是property(属性)change(改变)的时候，触发事件（对象改变任何属性的时候都会触发）。但是这个事件是IE专有的！，onpropertychange 会在设置了disable=true的时候失效，
4、oninput：该事件是处IE以外的大多数浏览器都支持的事件，只对该对象的value值改变的时候触发，是实时的。但是通过js改变的value 不会触发该事件。
在阻止冒泡事件时
e.stopPropagation() //用于firefox和chrome等其他浏览器。
e.cancelBubble = true //用于IE中阻止冒泡事件
你会发现，在你单击输入框的时候会触发onpropertychange，在你输入一个值的时候也会触发该事件，因此说明了在监听onpropertychange时 只要有属性发生变化就会触发该事件。
既然知道了这一点，我们会发现，当我们有的时候在文本框的值变化的时候我们希望改变一个自定义的属性值，这样地话onpropertychange就会触发两次，这个使我们不希望发生的。
那我们怎样才能知道我们改变的是哪个属性呢？不防我们试着获取一下onpropertychange的参数内容
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <input type="text" id="propertychang" value="文本" onclick="this.isprop = 'prop'"/> <script>
document.getElementById("propertychang").attachEvent("onpropertychange",function(){
console.log(arguments.length);
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
</script>
</body>
</html>
运行上边代码我们会发现输出了1和[object]如图：
说明该事件有一个参数而且是object类型，那么我们遍历一下这个object看看
代码：
<input type="text" id="propertychang" value="文本" onclick="this.isprop = 'prop'"/>
<script>
document.getElementById("propertychang").attachEvent("onpropertychange",function(obj){
for(var key in obj){
console.log(key + ":" + obj[key]);
}
});
</script>
输出如下：
我们发现会有好多属性，但是我们仔细查看会找到一个propertyName的属性，因此我们可以用此属性获取那个属性改变了所以我们可以这样写：
<input type="text" id="propertychang" value="文本" onfocus="this.isprop = 'prop'"/>
<script>
document.getElementById("propertychang").attachEvent("onpropertychange",function(obj){
if(obj.propertyName === "value"){
//自己的函数处理
}
});
</script>
写到这里这篇文章也就结束了，感谢大家的阅读。
js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别的更多相关文章
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- jQuery监听文本框值改变触发事件（propertychange）
完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- js监听文本框变化事件
用js有两种写法: 法一: <!DOCTYPE HTMl> <html> <head> <title> new document </title& ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
随机推荐
- 自学Zabbix3.9.2-模板Templates-linking/unlinking
自学Zabbix3.9.2-模板Templates-linking/unlinking HOST链接模板之后,便继承了模板里定义的item,trigger等等,使用这个方法,配置zabbix监控会减少 ...
- MVC(二)
一: 在新接触MVC的时候可以先使用VS建一个MVC项目(不是空项目哟),MVC特别人性化的建一个示例,展示了MVC项目的基本组成.如下: App_Data 数据库文件,需根据数据库变动而变更. Ap ...
- check the manual that corresponds to your MySQL server version for the right syntax处理方案
check the manual that corresponds to your MySQL server version for the right syntax:代码出现这样的bug,就要注意你 ...
- linux定时器crontab
linux定时器crontab用法: 1.基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示 ...
- Hibernate--使用xml配置映射关系
写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml 2.使用@注解 二:xml的配置方式: eg:员工的xml配置文件: <?xml version=" ...
- 【ANT】taskdef class org.programmerplanet.ant.taskdefs.jmeter.JMeterTask cannot be found using the classloader AntClassLoader[]解决办法
把文件apache-jmeter-3.1\extras\ant-jmeter-1.1.1.jar复制到apache-ant-1.10.1\lib目录下即可.
- JavaWeb之ssm框架整合，用户角色权限管理
SSM框架整合 Spring SpringMVC MyBatis 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastjson 5, aspectwea ...
- linux系统下，安装centos7.0系统，配置网卡出现的问题（与centos5.x、centos6.x版本，有差异）
1.新建虚拟机时,自己下载的是centos64系统,选择系统时,默认选择centos,而未选择centos64位,导致犯了一个低级错误,导致后面网卡安装一直有问题 2.查看ip命令与centos5.x ...
- 初探XRebel
一.什么是XRebel? 1.介绍 XRebel 是不间断运行在 web 应用的交互式分析器.可以看到网页上的每一个操作在前端以及服务端.数据库.网络传输都花费多少时间,当发现问题会在浏览器中显示警告 ...
- Xamarin android CardView的使用详解
android 5.0新增加的一个控件CardView,在support v7兼容包中,意思就是卡片View,虽然可以设置阴影,圆角等等样式,但是我们也可以自己写出来,谷歌工程师之所以出这个,肯定是帮 ...