提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select>

浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

JavaScript 中, 使用 addEventListener() 方法:

object .addEventListener("input", myScript ); 尝试一下

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

是否支持冒泡: 是否可以取消: 事件类型: Event 支持的 HTML 标签: <input type="password">, <input type="search">, <input type="text"> 和 <textarea>

#0

Lustime

791***069@qq.com

73

汇总 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=tru e后，onpropertychange 不会触发。

Lustime

Lustime

791***069@qq.com

6年前 (2017-09-26)

• HTML / CSS
  • HTML 教程
  • HTML5 教程
  • CSS 教程
  • CSS3 教程
  • Bootstrap3 教程
  • Bootstrap4 教程
  • Bootstrap5 教程
  • Font Awesome 教程
  • Foundation 教程
• JavaScript
  • JavaScript 教程
  • HTML DOM 教程
  • jQuery 教程
  • AngularJS 教程
  • AngularJS2 教程
  • Vue.js 教程
  • Vue3 教程
  • React 教程
  • TypeScript 教程
  • jQuery UI 教程
  • jQuery EasyUI 教程
  • Node.js 教程
  • AJAX 教程
  • JSON 教程
  • Echarts 教程
  • Chart.js 教程
  • Highcharts 教程
  • Google 地图 教程
• 服务端
  • Python 教程
  • Python2.x 教程
  • Linux 教程
  • Docker 教程
  • Ruby 教程
  • Java 教程
  • C 教程
  • C++ 教程
  • Perl 教程
  • Servlet 教程
  • JSP 教程
  • Lua 教程
  • Rust 教程
  • Scala 教程
  • Go 教程
  • PHP 教程
  • 数据结构与算法
  • Django 教程
  • Zookeeper 教程
  • 设计模式
  • 正则表达式
  • Maven 教程
  • Verilog 教程
  • ASP 教程
  • AppML 教程
  • VBScript 教程
• 数据库
  • SQL 教程
  • MySQL 教程
  • PostgreSQL 教程
  • SQLite 教程
  • MongoDB 教程
  • Redis 教程
  • Memcached 教程
• 数据分析
  • Python 教程
  • NumPy 教程
  • Pandas 教程
  • Matplotlib 教程
  • Scipy 教程
  • R 教程
  • Julia 教程
• 移动端
  • Android 教程
  • Swift 教程
  • jQuery Mobile 教程
  • ionic 教程
  • Kotlin 教程
• XML 教程
  • XML 教程
  • DTD 教程
  • XML DOM 教程
  • XSLT 教程
  • XPath 教程
  • XQuery 教程
  • XLink 教程
  • XPointer 教程
  • XML Schema 教程
  • XSL-FO 教程
  • SVG 教程
• ASP.NET
  • ASP.NET 教程
  • C# 教程
  • Web Pages 教程
  • Razor 教程
  • MVC 教程
  • Web Forms 教程
• Web Service
  • Web Service 教程
  • WSDL 教程
  • SOAP 教程
  • RSS 教程
  • RDF 教程
• 开发工具
  • Eclipse 教程
  • Git 教程
  • Svn 教程
  • Markdown 教程
• 网站建设
  • HTTP 教程
  • 网站建设指南
  • 浏览器信息
  • 网站主机教程
  • TCP/IP 教程
  • W3C 教程
  • 网站品质