ejemplos - div contenteditable no es realmente editable en webkit

ejemplo de content editable

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. Agregué a los oyentes de eventos para enfocar, teclear y presionar teclas para ver si la división los está recibiendo, ¡Y LO ES!

¿Cómo podría ser que todos los eventos apropiados se estén disparando y que el contenido del div no se actualice adecuadamente? No estoy haciendo nada funky como prevenir el comportamiento predeterminado de los eventos.

Además, me he vuelto muy complaciente al trabajar varias veces antes en diferentes proyectos, así que estoy bastante seguro de que la estructura del HTML de esta página en particular está causando algunos errores. Nuevamente, el problema solo ocurre en Chrome y Safari; Firefox y IE8 están bien.

Answer 1

Está bien, me di cuenta de 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, estaba impidiendo que el cursor se posicionara dentro de mi div editable de contenido.

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

Answer 2

Me gustaría compartir este código contigo. ¡Podría ayudarte! Deshabilita la selección de usuario y la llamada para todo el sitio y, a continuación, anula los campos susceptibles de edición para permitir la selección de usuario.

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

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