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

【问题标题】：oninput gets triggered while focusing on input field in internet explorer(Version 11.1082.18362.0)在 Internet Explorer 中关注输入字段时触发 oninput（版本 11.1082.18362.0）
【发布时间】：2021-05-08 12:55:21
【问题描述】：

下面是我在 IE11（版本 11.1082.18362.0）和 Chrome（版本 88.0.4324.104）上运行的 HTML。
如果不使用占位符，则 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>

【问题讨论】：

你的意思是，如果我们点击该字段，但只有当它有一个占位符时，IE 中才会触发 oninput？
没错，是的。
@VishalBhardwaj 这个问题怎么样？我下面的回答对解决这个问题有帮助吗？如果是这样，您可以参考this，它可以帮助其他社区成员将来解决类似问题。感谢您的理解。

标签： javascript html forms google-chrome internet-explorer

【解决方案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");
}

&lt;input id="test" type="text" value="" placeholder="new" onchange="alert('change')" /&gt;

【讨论】：

你能详细说明这里到底发生了什么吗？