实时监听input输入框value的变化

7,365 阅读1分钟

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>
  • 浏览器支持:
ChromefireFoxSafariIEOpera
Yes4.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>