Есть ли способ остановить использование контентной каретки над элементами в IE10?

Кажется, что в IE10 есть ошибка, где, если я поместил элемент над другим элементом с атрибутом contenteditable, каретка редактора нарисована над всем.

Вы можете видеть это поведение ниже на изображении ниже и в этом jsFiddle.

Я обрушился с множеством свойств CSS и не смог найти решение для этого. Он работает как ожидается в других браузерах.

Причина, по которой мне это нужно, - это то, что я разрабатываю редактор WYSWIYG (TinyMCE), когда панели инструментов скользят вниз по текст, когда они требуются. Эта ошибка заставляет каретку отображаться поверх панели инструментов.

Единственное решение, о котором я думал, это размыть фокус редактора и переориентировать его, когда панель инструментов исчезла. Однако это приведет к тому, что пользователи не будут печатать, когда панель инструментов активирована, а также приведет к непоследовательному поведению в браузерах.

Есть ли обходной путь к этой ошибке?

Ответ 1

Невозможно совместить каретку с другим элементом в IE. Этот вопрос задавали много раз:

...

Но вы можете размыть текстовое поле после получения позиции каретки (см. Позиция Caret в текстовом поле, в символах с начала), а затем отобразите панель инструментов. После скрытия панели инструментов вы можете снова сфокусировать текстовое поле, установив позицию каретки с помощью:

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

Ответ 2

Добавьте -ms-user-select: none в элемент contenteditable. Настройка фокуса тогда не отображает курсор - угадывает причуду браузера. Курсор, вероятно, появится снова, как только вы нажмете влево/вправо или введите еще один char.

Ответ 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

Ответ 4

Ну, очевидным обходным решением является уменьшение высоты contenteditable div и отображение панели инструментов над редактируемой областью, а не сверху.