HTML5 标准事件 oninput
和 IE 专属事件 onpropertychange
事件实时监听输入框 value 的变化
oninput 事件在用户输入时触发。
该事件在 <input>
或 <textarea>
元素的值发生改变时触发。
提示: 该事件类似于 onchange
事件。不同之处在于 oninput 事件在元素值发生变化是立即触发
, onchange 在元素失去焦点时才会触发
。另外一点不同是 onchange
事件也可以作用于 <keygen>
和 <select>
元素。
- oninput 支持的HTML标签:
<input type="password">
<input type="search">
<input type="text">
<textarea>
- 浏览器支持:
Chrome | fireFox | Safari | IE | Opera |
---|---|---|---|---|
Yes | 4.0+ | 5.0+ | 9.0+ | Yes |
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" oninput="onInput(event)" placeholder="oninput" />
<input type="text" id="foo" placeholder="foo" />
<input type="text" id="bar" placeholder="bar" />
<script>
function onInput(e) {
console.log('oninput 正在输入:', e.target.value);
}
const fooInput = document.querySelector('#foo');
fooInput.addEventListener('input', function (e) {
console.log('foo 正在输入:', e.target.value);
});
const barInput = document.querySelector('#bar');
barInput.oninput = function (e) {
console.log('bar 正在输入:', e.target.value);
};
</script>
</body>
</html>