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

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

Exemple d'utilisation

Vous pouvez utiliser cette fonction comme ceci :

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);

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!