Maison > interface Web > js tutoriel > le corps du texte

Comment puis-je déterminer les décalages de caractères de début et de fin d'une sélection utilisateur dans son élément HTML parent ?

Susan Sarandon
Libérer: 2024-11-18 02:44:02
original
348 Les gens l'ont consulté

How Can I Determine the Start and End Character Offsets of a User Selection Within Its Parent HTML Element?

Détermination des décalages de début et de fin d'une plage dans son conteneur parent

Problème

Étant donné un élément HTML, comment déterminer les décalages de caractères dans le conteneur parent où commence et se termine une plage (sélection de l'utilisateur), même lorsque la sélection s'étend sur des balises HTML ?

Solution

Réponse mise à jour :

Pour obtenir les décalages de début et de fin :

function getSelectionCharacterOffsetWithin(element) {
  // Determine start and end offsets
  var start = 0;
  var end = 0;
  // Create ranges
  var range = getRangeAt(0);
  var preCaretRange = range.cloneRange();

  // Set start offset
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;

  // Set end offset
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;

  // Return the object
  return { start: start, end: end };
}
Copier après la connexion

Réponse originale :

Le code fourni utilise getSelection() et getRangeAt(0) pour récupérer la sélection. Il calcule ensuite le décalage de la position du curseur dans l'élément à l'aide de la méthode toString() sur la plage. Cette approche fournit uniquement le décalage de fin ou la position du curseur.

Exemple :

function getRangeCharacterOffsetWithin(element) {
  var range, sel;
  if ((sel = window.getSelection())) {
    range = sel.getRangeAt(0);
    range.collapse(false);
    prevRange = range.cloneRange();
    prevRange.selectNodeContents(element);
    prevRange.setEnd(range.endContainer, range.endOffset);
    return prevRange.toString().length;
  }
  return 0;
}
Copier après la connexion

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