IE10/11下含placeholder的文本输入框聚焦时如何阻止input事件触发？

这确实是IE11的经典兼容性坑，我之前做项目时也踩过几次，给你详细拆解下：

为什么会出现这个现象？ #

IE11对HTML5的type="email"输入框实现有bug：当输入框为空且设置了placeholder时，点击输入框获取焦点的瞬间，浏览器内部会执行一次无意义的"值同步"操作（肉眼完全看不到输入框内容变化），但错误地触发了input事件。本质是IE11把placeholder的渲染逻辑和输入框实际值的判断逻辑搞混了，不符合标准的事件触发规则。

可行的解决办法 #

这里有几个实用的方案，你可以根据业务场景选择：

方案1：判断实际值是否真的变化 #

在input事件回调里，对比当前值和上一次记录的值，只有值确实改变时才执行业务逻辑，这是最通用的方案：

var el = document.getElementById('myEmail');
var lastValue = el.value; // 初始化记录初始值
el.addEventListener("input", myFunction, true);

function myFunction() {
  if (el.value !== lastValue) {
    lastValue = el.value; // 更新记录的基准值
    alert("changed");
  }
}

方案2：改用change事件（适合非实时监听场景） #

如果你的业务不需要实时监听输入过程，只需要在用户输入完成并离开输入框时触发逻辑，change事件在IE11下不会有这个问题——它只会在输入框值真正改变且失去焦点时触发：

var el = document.getElementById('myEmail');
el.addEventListener("change", myFunction, true);

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

方案3：针对IE11做定向兼容 #

通过特性检测识别IE11，然后单独处理事件逻辑，避免影响其他正常浏览器：

var el = document.getElementById('myEmail');
// 特性检测判断是否是IE11
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

function handleInput() {
  if (el.value !== el._lastValue) {
    el._lastValue = el.value;
    alert("changed");
  }
}

if (isIE11) {
  el._lastValue = el.value;
  el.addEventListener("input", handleInput, true);
} else {
  // 其他正常浏览器直接绑定事件
  el.addEventListener("input", handleInput, true);
}

内容的提问来源于stack exchange，提问作者shinobi