input的oninput、onchange与onpropertychange事件
汇总onchange onpropertychange 和oninput事件的区别:
onpropertychange 只在IE8及以下的版本起作用。
oninput在IE9以上版本及其他浏览器都支持。
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>$(function(){$("#search").on('input', function(e) {console.log("1:"+$("#search").val());})$("#search").on('change', function(e) {console.log("2:"+$("#search").val());})$("#search").on('propertychange', function(e) {console.log("3:"+$("#search").val());})$("#btn").click(function(){$("#search").val("hello");})})
</script>
</head>
<body><input id="search" value=""></input><button id = "btn">Update</button>
</body>
IE11测试:
input起作用,propertychange不起作用。
IE8测试:
propertychange起作用,input不起作用。
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不会触发。 在IE9及以上的版本不起作用。
*如果想失去焦点时,不触发相应的功能,就不用change事件。
*只想通过键盘改变输入值时才触发,就用input事件。(IE8以下浏览器除外)
input的oninput、onchange与onpropertychange事件相关推荐
- 【转】总结oninput、onchange与onpropertychange事件的用法和区别
经本人测试在chrome下的从历史记录中选取值的时候也户触发input事件 前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过 ...
- 实时监听文本框输入 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 ...
- input标签内容改变的触发事件
1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychange事件是实时触发,每增加或 ...
- 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是推荐加上的,去掉他有些东西会 ...
最新文章
- 机器学习:集成学习(ensemble),bootstrap,Bagging,随机森林,Boosting
- 错误An entity with the same identity already exists in this EntitySet RIA
- ICDAR 2019论文:自然场景文字定位技术详解
- 【算法】剑指 Offer 18. 删除链表的节点
- Python标准库中的uuid
- Scrapy保存中文字符到json文件时编码设置
- kindle的xray怎么用_kindle的x-ray有什么用
- 【机器学习】偏差-方差分解Bias-variance Decomposition
- 如何区分网线是几类的_如何判断网线是几类线?
- Java实现第九届蓝桥杯第几个幸运数字
- 2020腾讯广告算法大赛
- pycharm安装mysql驱动包
- word 三线表 中间辅助线即行线如何断开?
- 【Mysql】调优必知的sql访问方式
- 北京市高等教育自学考试2023年教材信息表
- Windows内网穿透远程桌面:公网远程桌面控制内网电脑 2/3
- 5000词学英语——DAY5
- 不用CSDN博客了,用博客园。。。
- 计算机屏幕不清晰,怎么解决电脑屏幕模糊、屏幕显示不清晰
- redis-集群安装
热门文章
- java proguard 反混淆_JAVA之代码混淆proguard
- Axure RP 9 原型图的绘制及交互
- AutoDWG DWG 转换 PDF 控制组件-ActiveX
- 数据仓库中的慢变化维度和快变化维度
- 通俗易懂谈强化学习之Q-Learning算法实战
- 9个顶级开发IoT项目的开源物联网平台
- Java SSM框架简介
- 数据包络分析方法与maxdea软件_北大经济学博士张川川:经济学实证分析方法与论文写作经验分享会(国庆网络专场)...
- VRP--车辆路径问题 c++
- cmd控制台执行php乱码,解决CMD控制台乱码问题