Maison > interface Web > js tutoriel > Comment puis-je obtenir la position du curseur basée sur les caractères dans une zone de texte ?

Comment puis-je obtenir la position du curseur basée sur les caractères dans une zone de texte ?

Mary-Kate Olsen
Libérer: 2024-12-23 02:26:16
original
881 Les gens l'ont consulté

How Do I Get the Character-Based Caret Position in a Textarea?

Obtention de la position du curseur basée sur le caractère dans une zone de texte

Déterminer la position du curseur dans un élément de zone de texte peut être un défi, en particulier lorsque l'on recherche la position exacte index de colonne en caractères. Voici un aperçu de la façon dont vous pouvez y parvenir :

Pour Firefox et Safari

Les navigateurs basés sur Gecko comme Firefox et Safari fournissent de manière transparente la propriété selectionStart sur les zones de texte. Cette propriété représente la position du curseur en caractères depuis le début de l'élément.

Pour Internet Explorer

Malheureusement, Internet Explorer n'offre pas d'accès direct au curseur position. Au lieu de cela, vous devrez recourir à une approche plus complexe :

  • Créer une plage de sélection : Utilisez createRange() pour générer un objet de plage de sélection.
  • Sélection en double : Créez une copie de la plage de sélection à des fins de comparaison.
  • Déplacer Limite de sélection :Modifiez la sélection en double pour inclure un caractère de nouvelle ligne au début du texte de l'élément.
  • Comparez la longueur de la sélection : Soustrayez la longueur de la sélection en double de la sélection d'origine longueur pour déterminer la position du curseur.

Code complet Exemple

Le code JavaScript suivant montre comment récupérer la position du curseur en caractères :

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  }
  return 0;
}
Copier après la connexion

Exemple d'utilisation

Vous pouvez utiliser cette fonction comme ceci :

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);
Copier après la connexion

Récupération des environs Chaînes

Pour obtenir les chaînes entourant le curseur ou la sélection, vous pouvez utiliser la fonction substring() pour extraire le texte avant, pendant et après la sélection.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal