Force contenteditable div para dejar de aceptar entrada después de que pierde foco bajo Webkit

Question

En Chrome y Safari (y posiblemente otros navegadores basados ​​en Webkit) todavía es posible escribir en un div satisfactorio, incluso después de que el div pierde el foco.

me construyeron un ejemplo simple para ilustrar esta cuestión: http://jsfiddle.net/yfcsU/3/

El ejemplo tiene dos elementos: un div con contenteditable="true" y un enlace que activará un evento de falta de definición en el div contenteditable cuando se hace clic en él.

Cuando se hace clic en el enlace, la división contenteditable pierde el foco, pero aún se puede escribir en el div y cualquier pulsación de tecla provocará que se vuelva a enfocar.

Este comportamiento es diferente en Firefox donde funciona como se esperaba: al hacer clic en el vínculo, el div contenteditable dejará de aceptar la entrada.

En Webkit, ¿hay alguna manera de forzar a la div contenteditable a dejar de aceptar entradas después de que pierda el foco sin deshabilitar contenteditable en div?

Answer 1

respuesta marcada como correcta es de hecho correcta pero agregaría otra solución que podría ser un poco más directa. Después de llamar a la falta de definición() en el contentEditable div que tiene que llamar a esto:

window.getSelection().removeAllRanges(); 

aquí el test: http://jsfiddle.net/mareksuscak/oytdoxy8/

Me parece que lo hace el mismo trabajo y también explica por qué no funciona correctamente - por lo general, el rango de selección se elimina de los elementos de entrada cuando está borroso, pero de alguna manera no se ejecuta para los divisores de contenido editable y, por lo tanto, después de ingresar cualquier carácter/liberación, se vuelve a enfocar.

Answer 2

Después de luchar con esto por un tiempo, era muy probable que encontrara la manera de forzar a un elemento contento a dejar de aceptar entradas en Webkit.

La solución es crear un elemento temporal editable, agregarlo al DOM, enfocarlo y luego eliminarlo. Esto hará que cualquier otro elemento contenteditable en la página se desactive.

El código jQuery equivalente para esto sería:

$('<div contenteditable="true"></div>').appendTo('body').focus().remove() 

He actualizado el ejemplo original para incluir una demostración de esta técnica: http://jsfiddle.net/yfcsU/4/