在 Internet Explorer（版本 11.1082.18362.0）中关注输入字段时触发 oninput

Question

下面是 HTML I 运行在 IE11（版本 11.1082.18362.0）和 Chrome（版本 88.0.4324.104）上。
如果不使用占位符，oninput 在两个浏览器中都可以正常工作，但是当在 IE 中关注输入字段时使用它时，oninput 会被触发，这是不可取的。如何解决？

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
</head>

<body>
  <input type="text" value="" placeholder="new" oninput="alert('input')" onchange="alert('change')" />
</body>

</html>

Answer 1

这是 IE 的一个已知问题。 <textarea> 元素在 IE 中也有这个问题。您可以使用以下代码作为解决方法在 IE 11 中修复它：

function onInputWraper(cb) {
  if (!window.navigator.userAgent.match(/MSIE|Trident/)) return cb;


  return function(e) {
    var t = e.target,
      active = (t == document.activeElement);
    if (!active || (t.placeholder && t.composition_started !== true)) {
      t.composition_started = active;
      if ((!active && t.tagName == 'TEXTAREA') || t.tagName == 'INPUT') {
        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    }
    cb(e);
  };
}

var el = document.getElementById('test');
el.addEventListener("input", onInputWraper(myFunction), true);

function myFunction() {
  alert("input");
}

<input id="test" type="text" value="" placeholder="new" onchange="alert('change')" />

在 Internet Explorer（版本 11.1082.18362.0）中关注输入字段时触发 oninput

oninput gets triggered while focusing on input field in internet explorer(Version 11.1082.18362.0)

html

javascript

forms

internet-explorer

google-chrome