contentEditable + selectAll: Firefox no permitirá la entrada de teclado en el contenido generado dinámicamente

Question

Estoy teniendo un problema en Firefox (otros navegadores parecen funcionar bien) con elementos generados dinámicamente que contiene un atributo contenteditable="true":

Si selectAll (ya sea dinámicamente o con mi mouse), Firefox no permitirá la entrada del teclado.

Por favor, consulte mi jsFiddle Example de referencia. Esto parece afectar solo a Firefox.

$(document).ready(function(){ 
$('.edit').live('dblclick', function() { 
    document.execCommand('selectAll',false,null); 
}); 

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); 
}); 

EDIT: Aquí es la aplicación real que estoy trabajando (perdón por el polvo): cr8.me/app/ff.html - Lo que estoy queriendo es hacer clic (doble clic para seleccionar todo el texto) de una nota, Categoría o Título del plan para editarlo. ¿Funciona para cualquiera? Tal vez es solo mi configuración, o pobre scripting. Las líneas 137, 572 son relevantes.

Answer 1

Al parecer Firefox tiene problemas con contenteditable en lapso de elementos (Estoy asumiendo que es el caso con otros dispositivos de pantalla : inline elementos, aunque no lo he probado). El problema se puede resolver simplemente con reemplazando tramos con divs. Además, los divs pueden tener la propiedad "display: inline" establecida en ellos usando css y funcionando bien.

Compruebe el ejemplo de trabajo aquí: http://jsfiddle.net/6sTJh/5/. El botón con la etiqueta "Añadir buggy" añade dinámicamente un tramo con contenteditable y no funciona como se esperaba, mientras que el botón "Agregar trabajo" agrega div con atributo contenteditable y funciona perfectamente.

Así es tu aplicación: cuando reemplacé todos los espacios contenteditable por divs, la edición funciona bien en Firefox 3.6 y Firefox 6.0.

nota lateral: cuanto a su código de aplicación - no utilice el mismo ID en varios nodos (como se está haciendo con el mismo ID "nota-título" en cada nota) o se puede obtener comportamiento inesperado de varios navegadores.

La regla general es que solo puede tener un elemento con una identificación dada en una página. Use clase para "agrupar" más de un elemento y seleccionarlos más adelante.