GlobalEventHandlers.oninput

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.`; 
}

结果

规范

Specification Status Comment
HTML Living Standard
oninput
Living Standard Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
oninputChrome Full support YesEdge Full support YesFirefox Full support 2IE Full support 9Opera Full support 10Safari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

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

参见