【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写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
特性检测代码要好些吧。
译文部分转自:http://blog.163.com/jinlu_hz/blog/static/1138301522011431102044154/
译文原地址:http://mathiasbynens.be/notes/oninput
译文原作者:mathias
from:http://blog.csdn.net/freshlover/article/details/39050609
【转】总结oninput、onchange与onpropertychange事件的用法和区别相关推荐
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- oninput事件onpropertychange事件onchange事件textIput事件
oninput事件&onpropertychange事件&onchange事件&textIput事件 oninput事件 简介 input,select,textarea元素值 ...
- onchange事件与onpropertychange事件的区别
onchange事件与onpropertychange事件的区别 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次内容有可能还是相等的)且失去 ...
- onchange、onpropertychange和oninput
1.onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发:onpropertychange事件却是实时触发, ...
- JS中onpropertychange事件和onchange事件区别
2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...
- onpropertychange事件
document.getElementById('updatelog').attachEvent('onpropertychange', function(o) {if (o.propertyName ...
- javascript中的onpropertychange事件 与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
- 解决ie8下onpropertychange事件间歇性失效的问题
有的时候onpropertychange事件一下好用,一下不好用 网上有的说去掉<!DOCTYPE html>就好了, 我试了下,虽然然管用,但doctype是推荐加上的,去掉他有些东西会 ...
- c# 事件和委托的区别,使用事件的好处
网上一些介绍事件 (event) 的文章让人看来觉得事件和委托好像有很大的不同.通常,事件被作为一种特殊的类型或结构来看待.但事实上,事件只是委托的一个修饰符 (modifier),此外编译器增加了一 ...
最新文章
- 设计模式的理解: 职责链模式 (Chain of Responsibility)
- 开源的恶果,程序员正在「自掘坟墓」
- spring boot 入门-使用spring boot构建简单应用
- 进击的PM:作为产品总监,你需要具备什么样的能力?
- HDU 3401 Trade dp+单调队列优化
- 知识点1--认识SSM框架并准备项目
- 将数组分成两部分,使得这两部分的和的差最小
- 【Python实战】数据预处理(数据清理、集成、变换、归约)
- 介值定理究竟在讲什么?
- js 画两点之间的连线
- ubuntu 20.04 | 常用软件 必要配置
- Bugku流量分析题目总结
- LED灯光偏色的原因
- curl 实现qq挂号登录
- Promise使用详解2(ES6中的Promise)
- CubeMX C6T6有关IIC的bug
- 淘宝天猫京东拼多多抖音苏宁1688等平台商品详情调用(店铺商品价格监控API接口调用展示)
- 2021.12.28activiti
- 如何获取物体表面的法向量?好好谈谈光度立体法
- Error 1609 安装 NetAdvantage 过程中的问题解决
热门文章
- kahn是什么牌子_老佛爷百货
- 刷新存储器的容量单位是什么_SRAM的容量扩展
- VB6.0中创建和使用文本资源文件
- [vb]一些窗口消息的详解
- 利用RC.EXE和RCDLL.DLL创建VB6资源文件
- Erlang之父Joe Armstrong去世
- 英特尔推出新CPU架构!3D封装打破摩尔定律限制,10nm芯片明年上市
- 三年研发、数亿美元成本,Mate 20的“大杀器”麒麟980是怎样炼成的?
- 太像人手了!OpenAI用打DOTA的算法,教会了机械手“盘核桃”
- 首个中国高校AI人才培养计划启动,Hinton、Hopcroft和李开复开班授课