2010-11-05 27 views
0

comment obtenir un texte sélectionné et les coordonnées xy du mot dans le même temps ??texte sélectionné et coordonnées xy

+0

Pouvez-vous clarifier votre question? Quel mot? Que faire si vous sélectionnez un paragraphe? Qu'est-ce que (X, Y) voulez-vous dans ce cas? Le début de la sélection? Sa fin, où le mouseup s'est-il produit? Ensuite, utilisez simplement .pageX et .pageY. Sinon, voir [Coordonnées du texte sélectionné dans la page du navigateur] (http://stackoverflow.com/questions/6846230/coordinates-of-selected-text-in-browser-page). –

Répondre

2

juste googlé:

var txt = ""; 

if (window.getSelection) { 
    txt = window.getSelection(); 
} else if (document.getSelection) { 
    // FireFox 
    txt = document.getSelection(); 
} else if (document.selection) { 
    // IE 6/7 
    txt = document.selection.createRange().text; 
} 

txt = txt.toString() 

Il n'y a pas moyen simple d'obtenir coordonnées X/Y du texte sélectionné. Parce que cela dépend de la position et de la taille de son conteneur, de la police du texte, de la disposition du texte et de beaucoup d'autres variables.

+1

Cela ne vous obtient pas le texte sélectionné, sauf dans IE. Dans d'autres navigateurs, il renvoie un objet 'Selection', sur lequel vous pouvez appeler' toString() 'pour obtenir le texte sélectionné. Vous n'avez pas non plus répondu à l'autre, plus difficile, une partie de la question. –

+0

Merci pour la correction, je n'ai tout simplement pas testé le code, car c'était très trivial. En ce qui concerne la partie la plus difficile de la question, je n'ai pas de réponse pour ça ... :( – MatuDuke

+0

J'ai déjà vu ça avant: http://openshakespeare.org/work/hamlet, donc ce n'est pas une question de Si c'est une question de HOW. Voulez-vous voir cette réponse –

0

J'utilise ce plugin jQuery http://plugins.jquery.com/node/7411 pour un projet et il semble fonctionner parfaitement. Vous pouvez utiliser jQuery pour obtenir la position de la souris http://docs.jquery.com/Tutorials:Mouse_Position

Voici quelques exemples de code, je travaille sur

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.textselect.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#select').bind('textselect click', function(e){ 
       console.log(e.text); 
       console.log(e.pageX); 
      }) 
     }); 
    </script> 
    <!-- Date: 2010-11-05 --> 
</head> 
<body> 
    <div id="select"> 
     This is a simple select test 
    </div> 
</body> 
</html> 
+0

pouvez-vous me donner un exemple sans jquery? – user495688

0

Vous pouvez essayer quelque chose comme ça

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.textselect.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#select').bind('textselect click', function(e){ 
       console.log(e.text); 
       console.log(e.pageX); 

       var selected_text = e.text 
       var original_text = $(this).text(); 
       var parts = original_text.replace(e.text, "/").split("/"); 

       for(i in parts) { 
        console.log(parts[i]) 
       } 
      }) 
     }); 
    </script> 
    <!-- Date: 2010-11-05 --> 
</head> 
<body> 
    <div id="select"> 
     This is a simple select test 
    </div> 
</body> 
</html> 
1

Pour développer @ la réponse de MatuDuke , vous pouvez obtenir la position du texte sélectionné comme suit:

var txt = window.getSelection(), 
    range = txt.getRangeAt(0), 
    boundary = range.getBoundingClientRec(); 

// Available positions: 
// boundary.top 
// boundary.bottom 
// boundary.left 
// boundary.right 

Cela vous donnera des valeurs de pixels relatives à la fenêtre. Cependant, cela ne semble pas fonctionner dans les zones de texte, un problème que j'essaie actuellement de résoudre.

+0

cela a bien fonctionné pour moi, sauf la méthode est range.getBoundingClientRect() –

+0

C'est exactement ce que je cherchais, merci! – locrizak