Coordonnées du texte sélectionné dans la page du navigateur

J'ai besoin des coordonnées en pixels du début de la sélection de texte (n'importe où sur la page, pas dans un textarea).

J'ai essayé en utilisant les coordonnées du curseur, mais cela ne fonctionnait pas très bien parce que les coordonnées du curseur et le début de la sélection ne sont pas toujours les mêmes (par exemple, lorsqu'un utilisateur fait glisser sur un texte).

J'espère que quelqu'un a la solution!

OriginalL'auteur Bouke | 2011-07-27

  1. 56

    Dans IE >= 9 et non-IE navigateurs (Firefox 4+, navigateurs WebKit publié depuis le début de 2009, Opera 11, peut-être plus tôt), vous pouvez utiliser le getClientRects() méthode de Range. Dans IE 4 - 10, vous pouvez utiliser le boundingLeft et boundingTop propriétés de la TextRange qui peuvent être extraites à partir de la sélection. Voici une fonction qui va faire ce que vous voulez dans les navigateurs récents.

    Noter qu'il existe certaines situations dans lesquelles vous pourriez, à tort, obtenir les coordonnées 0, 0, comme mentionné dans les commentaires de @Louis. Dans ce cas, vous devrez recourir à une solution de contournement temporaire d'insertion d'un élément et d'obtenir sa position.

    jsFiddle: http://jsfiddle.net/NFJ9r/132/

    Code:

    function getSelectionCoords(win) {
win = win || window;
var doc = win.document;
var sel = doc.selection, range, rects, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (win.getSelection) {
sel = win.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
rects = range.getClientRects();
if (rects.length > 0) {
rect = rects[0];
}
x = rect.left;
y = rect.top;
}
//Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = doc.createElement("span");
if (span.getClientRects) {
//Ensure span has dimensions and position by
//adding a zero-width space character
span.appendChild( doc.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
//Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}

    Mise à JOUR

    J'ai soumis une WebKit bug suite à des commentaires, et c'est maintenant corrigé.

    https://bugs.webkit.org/show_bug.cgi?id=65324

    Fonctionne parfaitement sur une seule ligne de sélections, mais lorsque vous sélectionnez plusieurs lignes (à partir de quelque part à mi-où, dans la première ligne), il indique les coordonnées pour le début de la première sélection de ligne de pas le début de la sélection elle-même.... Je sais que c'est probablement à cause de la getBounding fonction, mais est-il un moyen de changer cela?
    De nouveau mis à jour, et est en train de travailler sur WebKit.
    J'ai essayé ce code. Il est de retour toujours x: 0, y:0 même la position du curseur est déplacé dans firefox 20.0.1. Jetez un oeil à cette question similaire qui j'ai demandé récemment. Je suis à la recherche d'une solution de navigateur qui fonctionne avec IE8+, chrome et firefox.
    Ce code est spécifique pour les sélections/les plages à l'intérieur régulière du contenu HTML plutôt que ces zones de texte, comme c'est Longiligne. Je ne crois pas qu'il est possible de créer un générale de la croix-navigateur solution pour obtenir les coordonnées de la textarea curseur sans faire beaucoup de fastidieux texte de la mesure, c'est pourquoi je n'ai pas répondu à votre question.
    Il n'y a plus qu'un problème avec les textareas, je le crains. Exécuter cette violon en Chrome et cliquez à gauche sur "ici" (qui est en gras), sans sélection de texte. Vous obtiendrez 0, 0. Il est plus facilement reproductible dans Chrome, mais le problème de base est que si un zéro-largeur de gamme est pas dans un nœud de texte, puis le rectangle ont 0, 0 coordonnées. Je ne peux pas le reproduire dans FF avec un simple clic de souris car elle préfère régler le curseur à l'intérieur des nœuds de texte sur les clics, mais il peut également se produire dans FF si la sélection est manipulé par programmation.

    OriginalL'auteur Tim Down

  2. 16

    La réponse ci-dessus par TimDown ne fonctionne pas si le curseur est dans un élément vide.

    Le code ci-dessous permet de résoudre le problème. Remarquez comment il est presque identique à TimDown de solution sauf que ce code vérifie la range.getClientRects() tableau a length>0 avant d'appeler range.getClientRects()[0]

    function getSelectionCoords() {
var sel = document.selection, range, rect;
var x = 0, y = 0;
if (sel) {
if (sel.type != "Control") {
range = sel.createRange();
range.collapse(true);
x = range.boundingLeft;
y = range.boundingTop;
}
} else if (window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount) {
range = sel.getRangeAt(0).cloneRange();
if (range.getClientRects) {
range.collapse(true);
if (range.getClientRects().length>0){
rect = range.getClientRects()[0];
x = rect.left;
y = rect.top;
}
}
//Fall back to inserting a temporary element
if (x == 0 && y == 0) {
var span = document.createElement("span");
if (span.getClientRects) {
//Ensure span has dimensions and position by
//adding a zero-width space character
span.appendChild( document.createTextNode("\u200b") );
range.insertNode(span);
rect = span.getClientRects()[0];
x = rect.left;
y = rect.top;
var spanParent = span.parentNode;
spanParent.removeChild(span);
//Glue any broken text nodes back together
spanParent.normalize();
}
}
}
}
return { x: x, y: y };
}
    Bon point. Avez-vous l'esprit si je comprend que l'enregistrement dans ma réponse?
    Bien sûr, vous pouvez l'inclure dans votre réponse.

    OriginalL'auteur Jakobovski