在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的区别的更多相关文章

  1. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  2. jQuery监听文本框值改变触发事件（propertychange）

    完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

  4. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  5. js监听文本框变化事件

    用js有两种写法: 法一: <!DOCTYPE HTMl> <html> <head> <title> new document </title& ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  8. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  9. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

随机推荐

  1. TextMesh Pro Emoji Align With Text(表情和文字对齐)

    前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...

  2. final关键字细节

    final关键字在java中是一个很重要的关键字,其实按照其字面意思理解,就可以一窥这个关键字端倪,final的本意是最终的.所谓最终的,其最重要的特征就是不能修改,由此衍生出的许多细节均应以这个特征 ...

  3. 自学Zabbix1.1-简介

    1. 初识Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决 方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收费的技术支持赢利.        ...

  4. Caused by: com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'name': was expecting ('true', 'false' or 'null')

    Caused by: com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'name': was expecting ( ...

  5. Android项目实战（三十七）：Activity管理及BaseActivity的实现

    Ps:7-10月 完成公司两个app项目上架.漏掉的总结 开始慢慢补上. 一.写一个Activity的管理类 1.单例模式,以栈(先进后出)的形式存储Activity对象 public class A ...

  6. 39.Linux应用调试-strace命令

    1.strace简介 strace常用来跟踪进程执行时的系统调用和所接收的信号.通过strace可以知道应用程序打开了哪些文件,以及读写了什么内容,包括消耗的时间以及返回值等 2.安装strace命令 ...

  7. ASP.NET Core使用SkiaSharp实现验证码

    前言 本文并没有实现一个完成的验证码样例,只是提供了在当前.NET Core 2.0下使用Drawing API的另一种思路,并以简单Demo的形式展示出来. Skia Skia是一个开源的二维图形库 ...

  8. VR\AR 使用 SceneKit

    VR\AR 使用 SceneKit http://www.jianshu.com/c/70d63e3941fd

  9. C:宏定义的一些格式（怕忘记）

    现在还没怎么用到宏定义,但以后肯定会经常用的,写下这盘,以后忘记了可以温故.首先宏定义必须写在函数之外,其作用域从宏定义命令起到源程序结束,也就是说一但定义系统就会分配内存,想让它结束用“#undef ...

  10. 童话故事 --- CPU的贴身侍卫ITCM和ICache

    "叮铃铃- 叮铃铃-" "谁呀?"黛丝博士打开了家门,"哇,高飞,你怎么来了?" 高飞狗:"好久不见,想来看看你,还买了你最喜欢吃 ...