span non editable dans un contenu éditable

Les balises span non éditables ne fonctionnent pas correctement dans le contenteditable. Cette page présente quelques solutions.

Retour à la ligne et BR

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.

Encadrer la balise par une balise éditable

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 (&#65279;) :

Cela fonctionne, mais les caractères invisibles peuvent être supprimés.

Intercepter les événements

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...

Voir aussi


Dernière mise à jour : 30/03/2020