javascript - 有没有办法阻止 contenteditable 的插入符号出现在 IE10 中的元素上？

Question

IE10 中似乎存在一个错误，如果我将一个元素放在具有该contenteditable属性的另一个元素上，编辑器的插入符号就会覆盖所有内容。

您可以在下图中和此jsFiddle中看到此行为。

我已经使用了大量的 CSS 属性，但无法找到解决方案。它在其他浏览器中按预期工作。

我需要这个的原因是因为我正在设计一个 WYSWIYG 编辑器（TinyMCE fork）体验，其中工具栏在需要时滑过文本。此错误使插入符号出现在工具栏的顶部。

我想到的唯一解决方案是模糊编辑器的焦点，并在工具栏消失时重新聚焦。但是，这会在工具栏被激活时阻止用户输入，并且还会导致跨浏览器的行为不一致。

这个错误有解决方法吗？

Answer 1

无法将插入符号与 IE 中的另一个元素重叠。这个问题被问了很多次：

• 链接 1
• 链接 2

...

但是您可以在获取插入符号位置后模糊文本区域（请参阅：文本区域中的插入符号位置，从开头开始的字符），然后显示您的工具栏。隐藏工具栏后，您可以再次聚焦 textarea，设置插入符号位置：

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

请参阅：在 html 文本框中设置键盘插入符号位置

Answer 2

添加-ms-user-select: none到 contenteditable 元素。设置焦点将不会显示光标 - 猜测浏览器怪癖。一旦你点击左/右或输入另一个字符，光标可能会重新出现。

Answer 3

您可以使用 JavaScript 和 CSS 模拟插入符号并对其进行自定义。
通过适当的自定义，您可以针对此错误构建实用的解决方法。

这是一篇关于如何做到这一点的有趣文章：
http ://www.dynamicdrive.com/forums/showthread.php?17450-Emulating-a-terminal-like-caret-with-javascript-and-css

这是一个演示：
http ://shachi.prophp.org/demo.html

此外，还有一个jQuery Terminal Emulator插件，您可以根据您的特定需求进行分叉和自定义：http:
//terminal.jcubic.pl/#demo

Answer 4

显而易见的解决方法是降低 contenteditable div 的高度，并将工具栏显示在可编辑区域上方而不是在其顶部。