是否有办法阻止contenteditable的插入符号出现在IE10的元素上?

There seems to be a bug in IE10, where if I place an element over another element with the contenteditable attribute, the editor's caret is drawn over everything.

在IE10中似乎存在一个bug，如果我将一个元素放在另一个具有contenteditable属性的元素之上，那么编辑器的插入符号将被绘制到所有的元素之上。

You can see this behaviour below in the image below and in this jsFiddle.

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

I've mucked around with plenty of CSS properties, and been unable to find a solution to this. It works as expected in other browsers.

我使用了大量CSS属性，无法找到解决方案。它可以在其他浏览器中正常工作。

The reason I need this is because I am designing a WYSWIYG editor (TinyMCE fork) experience where the toolbars slide down over the text when they're required. This bug makes the caret appear over the top of the toolbar.

我之所以需要这一功能，是因为我正在设计一个WYSWIYG编辑器(TinyMCE fork)，当工具条在需要的时候滑到文本上。这个错误使插入符号出现在工具栏的顶部。

The only solution I have thought of is to blur the editor's focus, and refocus it when the toolbar has disappeared. However, this will stop users from typing when the toolbar is activated, and would also cause inconsistent behaviour across browsers.

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

Is there a workaround to this bug?

有解决这个问题的方法吗?

4 个解决方案

#1

There is no way to overlap the caret with another element in IE. This question was asked many times:

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

Link 1
链接1
Link 2
链接2

...

…

But you can blur the textarea after getting the caret position (see: Caret position in textarea, in characters from the start) and then show your toolbar. After hiding the toolbar, you can focus the textarea again, setting the caret position with:

但是，您可以在获得插入符号位置后模糊textarea(请参见: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();
        }
    }
}

See: Set keyboard caret position in html textbox

参见:在html文本框中设置键盘插入符号位置

4 个解决方案

#1

更多相关文章

随机推荐