Comment puis-je contrôler avec précision la position du curseur dans une division modifiable ?

Positionnement du curseur dans les éléments modifiables par contenu

En cherchant à manipuler la position du curseur dans un div modifiable par contenu, de nombreuses tentatives ont été faites pour exploiter la plage et Objets de sélection avec plus ou moins de succès. Cependant, des travaux récents ont découvert des méthodes précises pour définir l'emplacement du curseur :

Définir le curseur sur un caractère spécifique

Dans les navigateurs comme Firefox et Chrome, le résultat souhaité peut être réalisé en utilisant le code suivant :

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

Dans ce code, le curseur est positionné au cinquième caractère de la deuxième ligne de texte dans le div contenteditable avec l'identifiant "modifiable". Ceci est accompli en spécifiant le nœud cible (el.childNodes[2]) et la position de décalage (5) à l'intérieur de ce nœud pour les points de début et de fin de la plage.

Affiner la position

Pour une précision maximale, des nœuds et des décalages supplémentaires peuvent être inclus dans le code pour restreindre le placement du curseur à un caractère spécifique dans un élément imbriqué ou même dans un mot spécifique. Ce niveau de contrôle permet une manipulation transparente du curseur dans des structures HTML complexes.

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!