contenteditable div no realmente editable en webkit

Question

Tengo un div con el atributo contenteditable establecido en verdadero, sin embargo, no muestra un cursor parpadeante ni se actualiza cuando escribo texto en él. He agregado detectores de eventos para el enfoque, el uso de teclas y la pulsación de teclas para ver si el div los está recibiendo, ¡Y LO ES!

¿Cómo podría ser que todos los eventos apropiados estén realmente sonando pero el contenido del div no se esté actualizando apropiadamente? No estoy haciendo nada funky como prevenir el comportamiento predeterminado de los eventos.

Además, he estado contento trabajando varias veces antes en diferentes proyectos, así que estoy bastante seguro de que es un error causado por la estructura del HTML de esta página en particular. Nuevamente, el problema solo ocurre en Chrome y Safari; Firefox e IE8 están bien.

Answer 1

Bien, descubrí mi problema. Tenía la propiedad css '-webkit-user-select' establecida en none en un elemento de la jerarquía del div en cuestión. Por lo tanto, impedía que el cursor se posicionara alguna vez dentro de mi div de contentEditable.

Curiosamente, el correspondiente '-moz-user-select' (que también he configurado como ninguno en la jerarquía) no afecta a Firefox de la misma manera.

Answer 2

Me gustaría compartir este código con usted. ¡Podría ayudarte! Deshabilita la selección del usuario y la llamada para todo el sitio, y luego anula los campos contentos para permitir que el usuario lo seleccione.

html,body{ 
    -webkit-user-select: none; 
    -webkit-touch-callout: none; 
} 

*[contenteditable] { 
    -webkit-user-select: auto !important; 
}