Comment définir la position du curseur dans un élément modifiable ?-js tutoriel-php.cn

Comment définir la position du curseur dans un élément modifiable ?

Barbara Streisand

Libérer： 2024-12-14 08:55:10

original

754 Les gens l'ont consulté

How to Set the Caret Position in a Contenteditable Element?

Définir la position du curseur dans les éléments modifiables

Dans le développement Web, vous pouvez rencontrer des situations dans lesquelles vous souhaitez contrôler la position du curseur (curseur). dans un élément modifiable, tel qu'un éditeur de texte ou un champ de saisie de message. Cela permet une édition précise ou un placement du curseur à des emplacements spécifiques.

Pour y parvenir, vous pouvez utiliser les objets Range et Selection en JavaScript. Voici un exemple montrant comment définir la position du curseur :

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the start position of the range at the beginning of the fifth character of the third line
    range.setStart(el.childNodes[2], 5);

    // Collapse the range to the start point
    range.collapse(true);

    // Set the selection to start at the start position of the range
    sel.removeAllRanges();
    sel.addRange(range);
}

Copier après la connexion

Dans cet exemple, nous supposons l'existence d'un

élément avec l'ID "modifiable" et le rendre modifiable. Lorsque vous cliquez sur un bouton, la fonction setCaret déplacera le curseur vers le cinquième caractère de la troisième ligne de texte dans l'élément div contenteditable.

Notez que l'implémentation exacte du positionnement du curseur peut varier légèrement selon les navigateurs. Cependant, l'approche générale décrite ici est largement soutenue.

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!