在IE11上，當該iframe處於焦點狀態時，刪除其上具有contenteditable = true的iframe后，無法在輸入框中輸入內容

Question

我有一個iframe，其主體設置為contenteditable=true 。 當我從DOM中刪除該iframe時，我所有其他文本區域和輸入都無法響應用戶輸入。 這些對象仍然報告它們具有焦點，並且仍然聲稱正在接收onkeydown事件，但是這些元素的內容永遠不會由於這些事件而改變。

從DOM中刪除帶有<body contenteditable = true>的iframe之后，如何確保其他輸入字段仍然有效？

這是iframe: true時Froala編輯器的結構。

要求：

這僅在IE 11上發生。如果無法重現，請發布您的IE 11和OS版本（我在Windows 10上使用11.309.16299.0）。
iframe的結構無法更改，我知道在iframe中不具有contenteditable可以解決此問題，這是對超出此問題范圍的其他代碼的技術要求。
jQuery庫和任何其他第三方庫在此環境中不可用。
這不是我實際環境中唯一的范圍內的iframe，因此無法對所有iframe進行更改。

理想情況下，在將iframe從設置瀏覽器狀態的DOM中刪除后，我會調用一些普通的javascript函數，以將輸入字段恢復為正常狀態。

可以在下面找到代碼以及指向密碼筆的便捷鏈接。

<head>
<meta charset="UTF-8">

<script>
    function removeIframe() {
        var parent = document.getElementById("parent");
        var iframe =  document.getElementById("iframe");
        parent.removeChild(iframe);
    }

    function setContent() {
        document.getElementById("iframe").contentWindow.document.write("<html><body contenteditable='true'>Step 1: type something here</body></html>");
    }
</script>

</head>
<body>
<div id="parent" style="display:flex; flex-direction:column;">
  <div> This is a test for <b>IE 11 only</b>.
  </div>
    <input id="input" placeholder="Step 3: Try to type something into this input, note that you cannot, that's the problem.">
    <iframe id="iframe" onload="setContent()">
    </iframe>

    <button type="button" onclick="removeIframe()">Step 2: click this button to remove the iframe that you just typed into</button>
</div>

</body>

下面指向codepen的鏈接提供了該問題的簡單再現。

https://codepen.io/glenpierce/pen/vRgyXe?editors=1010

Answer 1

來自：刪除iframe后，窗口事件丟失，這顯然不是IE問題，我發現window.focus()解決了該問題。

function removeIframe() {
        var parent = document.getElementById("parent");
        var iframe =  document.getElementById("iframe");
        parent.removeChild(iframe);
        window.focus(); //new code here
    }

在IE11上，當該iframe處於焦點狀態時，刪除其上具有contenteditable = true的iframe后，無法在輸入框中輸入內容

問題描述

1 個解決方案

解決方案1
0 2018-03-19 23:16:41

在IE11上，當該iframe處於焦點狀態時，刪除其上具有contenteditable = true的iframe后，無法在輸入框中輸入內容

問題描述

1 個解決方案

解決方案1 0 2018-03-19 23:16:41

解決方案1
0 2018-03-19 23:16:41