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

Comment obtenir les décalages de début et de fin d'une sélection de texte dans un élément conteneur ?

DDD
Libérer: 2024-11-17 16:38:01
original
289 Les gens l'ont consulté

How to Get the Start and End Offsets of a Text Selection Within a Container Element?

Obtenir les positions de début et de fin d'une sélection de texte par rapport à son conteneur

Problème :

Considérez le HTML suivant :

<div>
Copier après la connexion

Supposons qu'un utilisateur sélectionne le texte "home" de cet élément. Comment pouvons-nous déterminer les décalages de début et de fin de cette sélection par rapport au conteneur #parent ?

Réponse :

La propriété range.startOffset semble fournir la fonctionnalité souhaitée , mais il représente un décalage uniquement dans le conteneur immédiat. De plus, il ne représente un décalage de caractère que si le conteneur est un nœud de texte.

Code mis à jour :

Voici une version mise à jour du code qui renvoie correctement à la fois le début et décalages de fin :

function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      start = preCaretRange.toString().length;
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      end = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal