Comment puis-je déterminer, croisé navigateur, si le nœud dans un élément contenteditable est vide?

Question

Sans avoir à recourir à une bibliothèque, je voudrais savoir si (pas quand) le contenu de l'élément contented ci-dessous a été supprimé.

<span contenteditable id=foo>tell me when this string is deleted</span> 

Answer 1

Malheureusement, je lance Linux donc je ne peux pas tester IE, mais il fonctionne dans

Chrome et Firefox

document.getElementById("foo").onkeyup = function (event) { 
    // Firefox doesn't like innerText 
    var content = this.innerText || this.innerHTML; 

    // this replace strips whitespace (can be removed if needed) 
    if (content.replace(/\s/g, "").length === 0) { 
     this.blur(); // when using an alert, the onkeyup event will fire again if you hit enter... 
        // this removes the focus beforehand 
        // (can be removed if you are not using an alert box or something similar) 

     alert("content deleted"); 
    } 
}; 

Answer 2

var empty=document.getElementById("foo").innerHTML.replace(/<[^>]*>/g,"").replace(/ /g,"").length==0; 

Answer 3

Il n'y a aucun événement onchange, mais il y a un événement onkeyup:

document.getElementById('foo').onkeyup = function(){ 
    if(this.innerHTML.length == 0) alert('string deleted'); 
}; 

Answer 4

La seule façon que je peux penser au moment de créer un événement d'interrogation qui vérifie tous les petits peu pour voir si le div contient toujours le même texte. Si vous connaissez le texte que vous recherchez, vous pouvez simplement utiliser un regex (ou une recherche de chaîne de caractères) pour voir si la chaîne est toujours là. Vous pouvez écouter les événements keydown, keypress ou keyup, mais n'oubliez pas d'ajouter un timeout pour vous assurer que leur dernière pression sur une touche a été prise en compte, leur dernière pression pouvant être la touche backspace.