有没有办法阻止一个contenteditable的插入符号出现在IE10中？

Question

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

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

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

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

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

这个bug有解决方法吗？

Answer 1

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

• 链接1
• 链接2

...

但是你可以在获得插入位置后模糊textarea(请参阅:texta中的插入位置,从一开始就是字符),然后显示工具栏.隐藏工具栏后,您可以再次聚焦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 元素。设置焦点将不会显示光标 - 猜测浏览器的怪癖。一旦您点击左/右或输入另一个字符，光标可能会重新出现。