Escuchar eventos de un elemento HTML satisfactorio

Question

Estoy tratando de averiguar si hay alguna forma de escuchar eventos como focus o change de un elemento HTML con el atributo contenteditable.

que tienen este formato HTML:

<p id="test" contenteditable >Hello World</p> 

He intentado esto sin ningún éxito (JSBin):

var test = document.querySelector('#test'); 
test.addEventListener('change', function(){ 
    alert('content edited'); 
}, false); 
test.addEventListener('DOMCharacterDataModified', function(){ 
    alert('content edited'); 
}, false); 
test.addEventListener('focus', function(){ 
    alert('content edited'); 
}, false); 

No quiero escuchar a los eventos del teclado o el ratón. No encontré ninguna documentación clara en W3C y MDN sobre contenteditable.

¿Es posible escuchar change y focus u otros eventos en un elemento HTML editable?

Answer 1

No realmente. No hay evento change para elementos contenteditable, y tampoco hay evento HTML5 input, aunque creo que eventualmente aparecerá. Es un dolor.

---

Actualización 23 de junio de 2012

WebKit reciente apoya el evento HTML5 input en contenteditable elementos, al igual que Firefox 14.

---

focus, sin embargo, funciona, al igual que DOMCharacterDataModified en la mayoría de los navegadores (aunque notablemente no en IE < 9). Ver http://jsfiddle.net/UuYQH/112/

Por cierto, contenteditable no es un atributo booleano: requiere un valor, que debe ser uno de "verdadero", "falso", "heredar" y la cadena vacía (que es equivalente a "verdadero")

Answer 2

Sé que esto es un poco tarde, pero jQuery parece que funciona con el foco, comprobar este ejemplo Salida:

http://jsfiddle.net/powerphillg5/EGtSC/

$("#test").focus(function(){ 
    $("#log").append("<li>Item Focused</li>"); 
}); 

espero que esto ayuda, pero si no es lo que estábamos buscando I humildemente aceptará los votos hacia abajo.

Answer 3

Desenfoque (cuando el área pierde el foco) y enfoca ambos trabajos. Al menos con jQuery. Probado con Chrome y Safari 28 6.

$("#test").blur(function(){ 
    $("#log").append("<li>Item lost focus</li>"); 
}); 

Answer 4

contenteditable se introdujo camino de regreso en IE 5.5, que recibió el apoyo de la API de JavaScript 1.1/1.2 y se aplicarán primero a iframes, para después de DIV. Es compatible con todos los navegadores hasta cierto punto. Ahora, en la especificación HTML5, la mayoría de los elementos pueden aceptar este atributo (pero cuidado con la compatibilidad con versiones anteriores). El soporte de evento onchange puede aplicarse aún para formar elementos como fue diseñado originalmente, teniendo poco que ver con este atributo. Su opción sigue siendo los eventos de pulsación de tecla, que son fáciles de capturar y cuando se combinan con un control para el foco de elementos de destino, tiene un resultado similar al cambio. Puede que no sea ideal para casos extremos, pero para la mayoría de los casos de uso iría por esta ruta y también es la más compatible con versiones anteriores.