plusieurs éléments à contenu modifiable, en utilisant les touches fléchées pour naviguer

Question

J'ai reçu plusieurs éléments <p contenteditable="true"></p> sur une page. Je cherche une solution pour utiliser les touches fléchées pour naviguer à travers ces éléments disjoints, comme s'il s'agissait d'un seul élément éditable. Par exemple, si le signe d'insertion est au 10ème caractère de la dernière ligne du 1er paragraphe et que l'utilisateur appuie sur la touche fléchée vers le bas, le curseur devrait sauter au 2ème paragraphe et placer le curseur au 10ème caractère (s'il y en a un) sur sa première ligne.

Appréciez tous les commentaires.

Answer 1

Et si vous pouviez rendre l'élément conteneur modifiable au lieu de chaque paragraphe? Par exemple:

<div contenteditable="true"> 
    <p>Lorem ipsum</p> 
    <p>dolor sit</p> 
</div> 

Answer 2

réponse révisée

Vous pouvez détecter que le caret est au début ou à la fin de l'élément courant modifiable en utilisant quelque chose comme ce qui suit (exemple pour un tableau sur le dernière ligne):

• détecter l'événement flèche vers le bas keydown
• Vérifiez si le caret est à la fin de la pa ragraph en effectuant l'une des actions suivantes:
• Créez un Range (ou TextRange dans IE) à partir de l'objet de sélection et comparez-le à une autre plage englobant tout le paragraphe. C'est l'option un peu plus délicate mais plus transparente. OU:
• Mémorisez la sélection et définissez une brève minuterie (disons 1 milliseconde) pour permettre à la pression de prendre effet. La fonction transmise aux appels de temporisation compare la sélection en cours avec la sélection précédemment enregistrée. Si elles sont identiques, le curseur n'a pas bougé et doit être à la fin du paragraphe.
• Si le curseur se trouve à la fin du paragraphe, déplacez-le au début du paragraphe modifiable suivant.

Ceci n'est pas le comportement habituel du signe d'insertion, mais il est raisonnablement facile à réaliser et pourrait constituer un compromis raisonnable. Le problème est qu'il n'y a pas de moyen fiable de comparer les coordonnées du caret.