GlobalEventHandlers.oninput - Web API 接口参考 编辑

GlobalEventHandlersmixin的oninput属性是EventHandler，它处理<input>，<select>和 <textarea> 元素上的 input 事件。 它还会在contenteditable 或 designMode打开的元素上处理这些事件。

注意：与oninput不同的是， onchange 事件处理程序不一定会针对元素值的每次更改而调用。

语法

target.oninput = functionRef;

值

functionRef是一个函数名或函数表达式。该函数接收InputEvent 对象作为唯一参数。

示例

HTML

<input type="text" placeholder="Type something here to see its length."size="50"> <p id="log"></p>

JavaScript

let input = document.querySelector('input');
let log =document.getElementById('log');
input.oninput = handleInput;
function handleInput(e) {
  log.textContent = `The field's value is${e.target.value.length} character(s) long.`;
}

结果

规范

浏览器兼容性

BCD tables only load in the browser

The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:

• A HTML5 Browser maze, oninput support
• Fixing oninput in IE Using html5Widgets includes polyfill for IE6-8
• Mathias Bynens suggests binding to both input and keydown
• oninput event | dottoro has notes about bugginess in IE9
• Bug 312094 - Add support for <select oninput>

参见

• input