监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入，比如腾讯微博编写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事件的区别：
监听文本框输入oninput和onpropertychange事件的更多相关文章
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- js与jquery实时监听输入框值的oninput与onpropertychange方法
文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监 ...
- IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变
监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- 2016-1-6第一个完整APP 私人通讯录的实现 2：增加提示用户的提示框，监听文本框
一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...
- vue实现实时监听文本框内容的变化（最后一种为原生js）
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- CSS3鼠标悬停8种动画特效
在线演示 本地下载
- Number使用笔记
Numbe函数用于将对象转换为数字 0 0 null 0 空 0 "" 0 true 1 false 0 date ...
- 部署 LAMP （CentOS 7.2），摘自阿里云，方便查看使用
原文地址:https://help.aliyun.com/document_detail/50774.html?spm=5176.product25365.6.728.C9s3V8 简介 LAMP指L ...
- 自定义QSS
/*QComboBox*/ QComboBox {border: 1px solid rgb(111, 156, 207);border-radius: 3px;padding: 1px 18px 1 ...
- 网络性能监测工具smokeping
smokeping简介: smokeping是rrdtool的作者Tobi Oetiker的作品,所以它在图形显示方面有很大优势,也是一个很有特点的opensource工具:多种探测方式,包括fpin ...
- 《Maven实战》第14章 灵活的构建
面对不同环境的差异能够灵活的构建项目, 操作系统的差异 开发环境.测试环境.产品环境的差异(最常用) 不同客户的差异 Maven中灵活的构建:属性.资源过滤.profile 14.1Maven属性 6 ...
- Count and Say，统计并输出，利用递归，和斐波那契数列原理一样。
问题描述:n=1,返回“1”:n=2,返回“11”:n=3,返回“21”:n=4,返回1211,.... 算法分析:和斐波那契数列道理差不多,都是后一个要依赖前一个元素.因此可以使用递归,也可以使用迭 ...
- bower 安装
安装Yeomannpm install --global yo搭建一个web应用脚手架,你将需要安装generator-webapp生成器:npm install -g generator-webap ...
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- WPF布局控件常用属性介绍
WPF布局控件常用属性介绍 其它 | 作者:慧都控件网 | 2011-04-06 13:41:57| 阅读 0次 有用(0) 评论(0) 概述:WPF布局控件都是派生自System.Windows ...