IE11下移除含contenteditable=true的iframe后输入框无法输入的解决方法

我之前遇到过完全一样的问题！这本质是浏览器的编辑上下文还死死绑定在那个已经被移除的iframe上，没自动切换回当前文档，导致普通的input/textarea虽然能触发keydown，但根本没法接管输入状态。试试下面这几个靠谱的解决方案：

• 先取消iframe的可编辑状态再移除（最稳妥）
  别直接删iframe！先把它内部的contenteditable关掉，让浏览器提前释放编辑上下文，再移除就不会留后遗症了：

  const targetIframe = document.getElementById('your-iframe-id');
  if (targetIframe?.contentDocument) {
    // 先把iframe的body设为不可编辑
    targetIframe.contentDocument.body.contentEditable = 'false';
  }
  // 再移除iframe
  targetIframe.remove();
  

  这个方法从根源上避免了上下文残留，比事后补救靠谱多了。

• 强制切换编辑上下文（事后补救）
  如果已经直接移除了iframe才发现问题，可以手动创建一个临时输入框，触发一次焦点切换，让浏览器把编辑上下文切回当前文档：

  // 创建一个完全不可见的临时input
  const tempInput = document.createElement('input');
  tempInput.style.cssText = 'position:absolute; opacity:0; pointer-events:none;';
  document.body.appendChild(tempInput);
  // 聚焦再失焦，强制切换上下文
  tempInput.focus();
  tempInput.blur();
  // 用完删掉
  document.body.removeChild(tempInput);
  

  这个小技巧能强制浏览器“忘掉”之前绑定在iframe上的编辑状态，让正常输入控件重新工作。

• 清除文档选区（极端情况）
  如果上面两个方法都不管用，可能是页面的选区还绑定在已移除的iframe元素上，试试清除选区：

  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    selection.removeAllRanges();
  }
  

  有时候选区残留会导致浏览器的输入逻辑混乱，清除后就能恢复正常。

另外要注意：尽量不要在用户正在编辑iframe内容的时候移除它，这种情况下更容易出现上下文残留的问题，最好先等用户结束编辑操作再执行移除逻辑。

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