实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数。过去一般都使用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;
}
例2、对所有ie使用onpropertychange,其他浏览器用oninput:
var ie = !!window.ActiveXObject;
if(ie){
object.onpropertychange = fn;
}else{
object.addEventListener("input",fn,false);
}
汇总onchange onpropertychange 和oninput事件的区别:
下面引用一篇译文:
HTML5将oninput事件标准化了,该事件用来检测用户的输入状态。当然,通过使用onkeydown
或者onkeyup
作为代替也是可以的。这些事件设计本意也并非如此,参见详情。
所有的现代浏览器支持oninput
,其中包括IE9。对于那些老式浏览器,在不支持该事件时用keydown
作为优雅降级。不幸的是,检测浏览器对该oninput
事件的支持性并不容易。假定浏览器支持oninput
,那么以下这段js代码的返回值为true
,否则为false
。
'oninput' in document.createElement('input')
这段代码在大多数浏览器中正常运行,除了Firefox(见bug #414853),故仍旧需要为oninput作浏览器特性检测。除此以外就没必要为其他浏览器作特性检测了,只需为input
和keydown
绑定事件,并在oninput
事件触发之后删除onkeydown
即可。示例如下:
someElement.oninput = function() {
el.onkeydown = null;
// Your code goes here
};
someElement.onkeydown = function() {
// Your code goes here
}
keydown
事件仅会被触发一次(在oninput
事件触发前),之后再触发oninput
。虽然并不完美,但总比写上一大堆oninput
特性检测代码要好些吧。
总结js方式:
function update() {
// Your code goes here, e.g.
console.log(this.value);
}
someElement.oninput = function() {
this.onkeydown = null;
update.call(this);
};
someElement.onkeydown = function() {
update.call(this);
};
jquery方式:
function update() {
// Your code goes here, e.g.
console.log(this.value);
}
var $someElement = $(someElement);
$someElement.bind({
'input': function() {
$someElement.unbind('keydown');
update.call(this);
},
'keydown': update
});
jquery插件方式:
$.fn.input = function(fn) {
var $this = this;
if (!fn) {
return $this.trigger('keydown.input');
}
return $this.bind({
'input.input': function(event) {
$this.unbind('keydown.input');
fn.call(this, event);
},
'keydown.input': function(event) {
fn.call(this, event);
}
});
};
使用:
$('.any-number-of-elements').input(function(event) {
alert(this.value);
event.preventDefault();
});
另外一种解决办法是:
if (!("oninput" in document.body)) {
element.onpropertychange = function() {
if (event.propertyName == "value")
this.oninput && this.oninput(event);
}
}
element.oninput = function() {
// …
}
实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别的更多相关文章
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- 总结oninput、onchange与onpropertychange事件的用法和区别,onchange
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 总结oninput、onchange与onpropertychange事件的用法和区别 书写搜索的神奇代码
总结oninput.onchange与onpropertychange事件的用法和区别 最近手机开发一个模糊搜索的功能组建,在网上就找到这篇文章! 前端页面开发的很多情况下都需要实时监听文本框输入,比 ...
- 总结oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- vue实现实时监听文本框内容的变化(最后一种为原生js)
一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
随机推荐
- 腾讯 AlloyCrop 1.0 发布
写在前面 AlloyCrop 这个项目是8个月前发布的,作为AlloyFinger 的典型案例,发布之后被BAT等其他公司广泛使用.但是发布之后,有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太 ...
- bzoj3728: PA2014Final Zarowki
Description 有n个房间和n盏灯,你需要在每个房间里放入一盏灯.每盏灯都有一定功率,每间房间都需要不少于一定功率的灯泡才可以完全照亮. 你可以去附近的商店换新灯泡,商店里所有正整数功率的 ...
- java考试易错题大全
常见的Java问题 1.什么是Java虚拟机?为什么Java被称作是"平台无关的编程语言"? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Ja ...
- Redux源码分析之基本概念
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- gitlab和github一起使用
还是在转我笔记上的内容, 也算备份 参考(https://segmentfault.com/a/1190000002994742) 可以对比着看, 我记得参考里面有个点没有说详细, 我把自己的流程记下 ...
- [补档]Cube
Cube 题目 给你一个n×m的棋盘,有一个1×1×2的长方体竖直放在(1,1)上,你可以将其在棋盘上滚动,你的目标是让其竖直放在(n,m)上,问至少需要多少次操作.(放倒.竖直.翻滚) INPUT ...
- mybatis 详解(三)------入门实例(基于注解)
1.创建MySQL数据库:mybatisDemo和表:user 详情参考:mybatis 详解(二)------入门实例(基于XML) 一致 2.建立一个Java工程,并导入相应的jar包,具体目录如 ...
- 到底什么样的企业才适合实施SAP系统?
SAP系统作为全宇宙第一的ERP,号称世界500强里面有80%的企业部署了SAP系统,总部位于德国沃尔多夫市,在全球拥有6万多名员工,遍布全球130个国家,并拥有覆盖全球11,500家企业的合作伙伴网 ...
- Spring+SpringMVC+MyBatis+easyUI整合进阶篇(一)设计一套好的RESTful API
写在前面的话 看了一下博客目录,距离上次更新这个系列的博文已经有两个多月,并不是因为不想继续写博客,由于中间这段时间更新了几篇其他系列的文章就暂时停止了,如今已经讲述的差不多,也就继续抽时间更新< ...
- HTML 超链接 表格
1...超链接 <a href="网址" target="_blank"> 被点击的文字</a> 如果把 target 属性设置为&qu ...