Les balises span
non éditables ne fonctionnent pas correctement dans le contenteditable.
Cette page présente quelques solutions.
Des navigateurs (Chrome notamment) ajoute une balise <BR>
à chaque fois qu'un nouveau
paragraphe est ajouté. Sur l'exemple suivant, si vous appuyez sur entré entre la main
et le contenu non éditable, un saut de ligne suppélmentaire est inséré :
Une solution pourrait être de supprimer les balises <br>
, mais cela pose d'autres
problèmes.
En réalité, le problème vient de la balise <span contenteditable='false'>
qui n'est
pas reconnue comme un caractère visible.
Une autre option est d'encadre la <span>
non éditable par une autre balise <span>
éditable.
Mais, si la balise encadrante est vide, le problème persiste. Une solution à ce problème
est d'y ajouter des caractères invisibles (
) :
Cela fonctionne, mais les caractères invisibles peuvent être supprimés.
Cette solution consiste à intercepter les événement du clavier. C'est une solution qui complique fortement le JavaScript.
Malheureusement, si vous jouez avec le JSfiddle ci-dessus, vous vous appercevrez que cette solution est loin d'être idéale.
Si vous avez une meilleure idée, n'hésitez pas à me contacter...