Comment éviter le mauvais positionnement du curseur lors de la suppression d'éléments dans un div modifiable

Question

Mon application inclut une fonction de saisie lorsqu'un utilisateur saisit une zone de commentaire. De la même manière que Facebook et google +, il effectuera une recherche d'utilisateurs et les proposera comme tags à la volée.

Lorsqu'un utilisateur sélectionne l'une des étiquettes proposées, il est entré dans la zone de saisie en tant qu'élément.

J'ai décidé d'utiliser un div compatible pour cela, mais j'ai rencontré quelques problèmes.

Il s'avère que firefox ne supprime pas les éléments insérés lorsqu'ils sont définis sur contentedable false alors que tous les autres navigateurs principaux le font. Pour contourner ce problème, j'ai défini les balises 'user' insérées comme contenteditble = true et j'ai écrit une solution de contournement jquery rapide pour résoudre ce problème.

Cela fonctionne parfaitement indépendamment d'un problème majeur. S'il y a plusieurs étiquettes dans la zone et que le premier n'est pas suivi de texte, alors l'utilisateur supprime le dernier (en supposant la suppression avec la touche retour arrière de droite à gauche) le curseur se positionne incorrectement après cette suppression finale.

La saisie à nouveau semble alors ramener la position à la normale.

Ce problème se produit uniquement dans Firefox

Voici un jsFiddle montrant la question:

http://jsfiddle.net/gordyr/PESky/

Placez votre curseur à la fin de cette dernière balise, puis maintenez enfoncée la touche backspace jusqu'à ce que tous les éléments soient supprimés. Vous verrez que le curseur/curseur se déplace vers le haut et hors de position.

Il est tout à fait possible que ce soit un bogue dans firefox lui-même, mais je cherche une solution de contournement quelconque car sans cette suppression automatique d'éléments avec javascript, ils ne sont pas supprimés du tout.

Un grand merci

Answer 1

Il semble que FF laisse un peu de saleté derrière, mais vous pouvez le nettoyer en ajoutant:

if (!$.trim(el.text())) { 
    el.empty(); 
} 

Cela vérifiera si le innerText du contenteditable ne contient que des espaces ou des sauts de ligne/pauses. Si c'est le cas, videz-le. Semble travailler dans mon test: http://jsfiddle.net/cBZ7k/

Side note: vous devriez probablement utiliser keydown au lieu de keypress pour le soutien de WebKit. En outre, e.which est suffisant pour obtenir le code de clé, jQuery normalise cette propriété d'événement pour vous.