Comment définir par programme la position du curseur dans un élément ContentEditable ?

Définition de la position du curseur dans un élément modifiable au contenu

La définition de la position du curseur dans un div modifiable par le contenu peut être réalisée à l'aide des objets Range et Selection. Voici comment définir le curseur à une position spécifique dans l'élément :

Code :

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)
}

Explication :

• el représente l'élément contenteditable.
• range est l'objet Range utilisé pour spécifier la position du curseur.
• sel est l'objet Selection utilisé pour manipuler la sélection.
• setStart() définit le début de la plage sur le nœud et le décalage spécifiés (el.childNodes[2] et 5, respectivement).
• collapse() réduit le plage à un seul point à la position de départ.
• removeAllRanges() supprime toutes les sélections existantes.
• addRange() ajoute la plage créée plage à la sélection.

Exemple :

Considérez le HTML suivant :

<div>

Lorsque vous cliquez sur le bouton "focus", la fonction JavaScript setCaret( ) est invoqué en plaçant le signe d'insertion au cinquième caractère de la deuxième ligne de texte.

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!