有没有办法阻止一个可信的插入符号出现在IE 10中的元素上？

Question

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

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

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

我需要这个的原因是因为我正在设计一个WYSWIYG编辑器（TinyMCE fork）体验，当工具栏在文本需要时向下滑动时。此错误使插入符显示在工具栏的顶部。

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

这个bug有解决方法吗？

Answer 1

没有办法将插入符号与IE中的另一个元素重叠。这个问题被多次询问：

• Link 1
• Link 2

...

但是你可以在获得插入位置后看到textarea（参见：Caret position in textarea, in characters from the start），然后显示你的工具栏。隐藏工具栏后，您可以再次聚焦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();
        }
    }
}

请参阅：Set keyboard caret position in html textbox

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

明显的解决方法是降低contentedable div的高度，并在可编辑区域上方而不是在其上方显示工具栏。