javascript - span - ¿Hay alguna manera de evitar que el cursor de un contenteditable aparezca sobre los elementos en IE10?

span contenteditable

Question

Parece que hay un error en IE10, donde si coloco un elemento sobre otro elemento con el atributo contenteditable , el cursor del editor se dibuja sobre todo.

Puede ver este comportamiento a continuación en la imagen a continuación y en este jsFiddle .

He andado con muchas propiedades CSS y no he podido encontrar una solución para esto. Funciona como se espera en otros navegadores.

La razón por la que necesito esto es porque estoy diseñando una experiencia WYSWIYG editor (horquilla TinyMCE ) donde las barras de herramientas se deslizan hacia abajo sobre el texto cuando son necesarias. Este error hace que el cursor aparezca en la parte superior de la barra de herramientas.

La única solución en la que he pensado es difuminar el enfoque del editor y volver a enfocarlo cuando la barra de herramientas ha desaparecido. Sin embargo, esto evitará que los usuarios escriban cuando la barra de herramientas está activada, y también causaría un comportamiento inconsistente en los navegadores.

¿Hay una solución a este error?

Answer 1

Agregue -ms-user-select: none al elemento contenteditable. El enfoque de configuración entonces no mostrará el cursor, adivinando una peculiaridad del navegador. Es probable que el cursor reaparezca una vez que pulses a la izquierda / derecha o escribas otro carácter.

Answer 2

Bueno, la solución obvia es disminuir la altura del div contenteditable y mostrar la barra de herramientas sobre el área editable en lugar de sobre ella.

Answer 3

No hay forma de superponer el carácter de intercalación con otro elemento en IE. Esta pregunta se hizo muchas veces:

• Enlace 1
• Enlace 2

...

Pero puede desenfocar el área de texto después de obtener la posición de intercalación (consulte: Posición de intercalación en el área de textura, en caracteres desde el principio ) y luego mostrar su barra de herramientas. Después de ocultar la barra de herramientas, puede enfocar de nuevo el área de texto, estableciendo la posición de intercalación con:

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();
        }
    }
}

Ver: Establecer la posición del teclado en el cuadro de texto html

Answer 4

Puedes simular un caret con JavaScript y CSS y personalizarlo.
Con la personalización adecuada puede crear una solución práctica a este error.

Aquí hay un interesante artículo sobre cómo hacer esto:
http://www.dynamicdrive.com/forums/showthread.php?17450-Emulating-a-terminal-like-caret-with-javascript-and-css

Aquí hay una demostración :
http://shachi.prophp.org/demo.html

Además, hay un plugin de emulador de terminal jQuery que puede dividir y personalizar según sus necesidades específicas:
http://terminal.jcubic.pl/#demo