Comment puis-je définir avec précision la position du curseur dans un div ContentEditable ?

Définir la position du caret dans un élément contenteditable

Viser à établir le caret à un emplacement précis dans un élément div contenteditable peut être une tâche difficile . En cherchant de l'aide auprès de la communauté en ligne, vous avez peut-être rencontré une solution JavaScript similaire à celle ci-dessous :

const range = document.createRange();
const myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);

Cependant, malgré son existence dans le référentiel de connaissances du Web, cette approche s'est révélée inefficace dans Firefox et Chrome. .

Embrasser la gamme et les objets de sélection

Pour rectifier la situation, libérer le potentiel de la gamme et les objets de sélection sont cruciaux. Ces objets servent de gardiens pour contrôler précisément le placement du curseur.

Pour illustrer leur application, déplaçons le curseur vers le cinquième caractère de la deuxième ligne de texte. Voici comment cela peut être réalisé :

function setCaret() {
    var el = document.getElementById("editable")
    var range = document.createRange()
    var sel = window.getSelection()
    
    range.setStart(el.childNodes[2], 5)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)
}

Implémentation HTML

Pour intégrer pleinement cette solution, intégrez le code HTML suivant dans votre code :

<div>

Avec cette implémentation, cliquer sur le bouton positionne correctement le curseur dans le div modifiable, vous accordant un contrôle méticuleux sur son placement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!