前端页面开发的很多情况下都需要实时监听文本框输入，比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数。过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现，但是这存在着一些不好的用户体验。比如onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；而onkeydown/onkeypress/onkeyup在处理复制、粘贴、拖拽、长按键（按住键盘不放）等细节上并不完善。

onpropertychange属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。其他浏览器下如果想要实现这一实时监听的需求，就要用到HTML5中的标准事件oninput，不过IE9以下的浏览器是不支持oninput事件的。

所以我们需要综合oninput和onpropertychange二者来实现文本区域实时监听的功能。举例如下：

例1、对支持oninput的浏览器用oninput，其他浏览器（IE6/7/8）使用onpropertychange：

var testinput = document.createElement('input');

if('oninput' in testinput){

    object.addEventListener("input",fn,false);

}else{

    object.onpropertychange = fn;

}
if (!("oninput" in document.body)) {

  element.onpropertychange = function() {

    if (event.propertyName == "value")

      this.oninput && this.oninput(event);

  }

}

element.oninput = function() {

  // …

}

注意: addEventListener的事件名不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

例2、对所有ie使用onpropertychange，其他浏览器用oninput：

var ie = !!window.ActiveXObject;

if(ie){

    object.onpropertychange = fn;

}else{

    object.addEventListener("input",fn,false);

}

例3、oninput使用正则表达式，非数字就替换为空。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title></title>

</head>

<script type="text/javascript">

function keypress(_this){

    _this.value = _this.value.replace(/[^-]/g, '');

}

</script>

<body>

    <input type="text" onInput ="keypress(this)" />

</body>

</html>

汇总onchange onpropertychange 和oninput事件的区别：

1、onchange事件与onpropertychange事件的区别：

onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。 
 
2、oninput事件与onpropertychange事件的区别： 
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离） 
 
3、oninput与onpropertychange失效的情况： 
（1）oninput事件：a). 当脚本中改变value时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。 
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。 
 

监听文本框输入oninput和onpropertychange事件的更多相关文章

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

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

  2. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

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

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

  4. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  5. js与jquery实时监听输入框值的oninput与onpropertychange方法

    文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...

  6. IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变

    监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...

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

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

  8. 2016-1-6第一个完整APP 私人通讯录的实现 2：增加提示用户的提示框，监听文本框

    一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...

  9. vue实现实时监听文本框内容的变化（最后一种为原生js）

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. oracle中INSTR函数的用法

    今天有个同学问我这个INSTR函数,我也不太清楚就上网查了查做一个小小的记录吧 INSTR(C1,C2,I,J) 在一个字符串中搜索指定的字符,返回发现指定的字符的位置; C1 被搜索的字符串 C2  ...

  2. react-native run-android Starting: Intent Error type 3 Error: Activity class does not exist

    使用”react-native run-android”命令运行android应用时,如果常常出现如下错误: Starting the app (/home/xxx/soft/sdk//platfor ...

  3. 去掉xml中的空格和换行符

    有时在拼接xml或是导入xml格式文件时,会无缘无故出现很多空格符合换行符,导致在转换json时会报各种错误,特此在网上找到了一中比较实用的方法: strxml = Regex.Replace(str ...

  4. Spring中<ref local=""/>与<ref bean=""/>区别

    小 Spring中<ref local=""/>与<ref bean=""/>区别 (2011-03-19 19:21:58) 转载▼ ...

  5. UOJ34 多项式乘法（非递归版）

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. java 实现Serv-U FTP 和 SFTP 上传 下载

    两种ftp使用java的实现方式 ,代码都已测试 第一种:Serv-U FTP 先决条件: 1.Serv-U FTP服务器搭建成功. 2.jar包需要:版本不限制 <!--ftp上传需要的jar ...

  7. 十二道MR习题 - 3 - 交集并集差集

    题目 有两个文件A和B,两个文件中都有几百万行数字,现在需要找出A文件和B文件中数字集合的交集.并集.以及A对B的差集. 简单说一下思路: 这个问题关键在于key和value的设计.这里我将文件中的数 ...

  8. scala学习手记5 - 元组与多重赋值

    假定要在一个方法中返回多个值.比如需要返回一个人的名.姓和邮箱地址.在Java中最常用的方法是定义一个Person类,其中包括相对应的字段:还有些不常用的方法就是返回一个集合或数组,拿到结果后再进行循 ...

  9. ie if判断

    <p> </p> <!--[if lt IE 7]> <html lang="en" ng-app="myApp" c ...

  10. # IFE前端（2015春）-task2

    第一章 JavaScript数据类型及语言基础 期望达成 掌握JavaScript的各种数据类型概念.判断方法 掌握JavaScript函数.对象的概念 掌握字符串.数字.数组.日期等对象的方法 了解 ...