Récupérer un texte sélectionné à la souris par l'utilisateur

Version imprimable

21/03/2012, 11h20
rambc

Récupérer un texte sélectionné à la souris par l'utilisateur

Bonjour,
je vais crére un dictionnaire mathématique illustré et dynamique pour des élèves de niveau Collège ou Lycée.

Afin de rendre ce dictionnaire efficace, j'aimerais qu'il soit possible de sélectionner du texte et, à l'aide d'un raccourci comme la [?], récupérer via JavaScript ce qui a été sélectionné par l'utilisateur. Est-ce possible ?

Tant que j'y suis, imaginons que l'utilisateur sélectionne un objet comme une image, peut-on récupérer le code HTML correspondant qui cacherait des métadonnées via par exemple des micros datas ?

Bonjour :)

Il est effectivement possible de récupérer le texte sélectionné en Javascript.
Voici une fonction en Javascript (pas en jQuery :?) qui fonctionne sur tous les navigateurs :
Code:

1 2 3 4 5 6 7 8 9 10 function getSelected() { if(window.getSelection) { return window.getSelection(); } else if(document.getSelection) { return document.getSelection(); } else { var selection = document.selection && document.selection.createRange(); if(selection.text) { return selection.text; } return false; } return false; }

22/03/2012, 11h42
rambc

Merci beaucoup pour ce code qui va m'être très utile ! :ccool:

Question toute bête : comment appeler la fonction lorsque je presse par exemple MAJ suivi de , ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 
    <script>
function getSelected() {
    if(window.getSelection){
        return window.getSelection();
 
    } else if(document.getSelection){
        return document.getSelection();
 
    } else {
        var selection = document.selection && document.selection.createRange();
 
        if(selection.text) {
            return selection.text;
        }
        return false;
    }
 
    return false;
}
    </script>
  </head>
 
  <body>
 
Voilà un bout de texte pout tester ce qui est sélectionné.
 
  </body>
</html>

Gràce à ce post, je suis arrivé au code suivant qui répond à mon problème excepté qu'il faut appuyer sur ENTRÉE pour connaître le texte qui a été sélectionné.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 
    <script>
/* Sources :
    1) http://www.developpez.net/forums/d1199754/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/recuperer-texte-selectionne-souris-lutilisateur/#post6575434
    2) http://www.developpez.net/forums/d1200420/webmasters-developpement-web/javascript/key-press-event/#post6576743
*/
function getSelected() {
    if(window.getSelection){
        return window.getSelection();
 
    } else if(document.getSelection){
        return document.getSelection();
 
    } else {
        var selection = document.selection && document.selection.createRange();
 
        if(selection.text) {
            return selection.text;
        }
        return false;
    }
 
    return false;
}
    </script>
  </head>
 
  <body>
 
Voilà un bout de texte <span style="color: red">pour tester</span>
<img src="http://www.developpez.net/template/images/logo.png">
ce qui est sélectionné.
 
  </body>
    <script>
document.onkeyup = function(event) {
  var keyCode = event.which || event.keyCode;
  if(keyCode == 13) {
      var test = getSelected();
 
      if(test != false){
          alert(">>>" + test + "<<<")
      }
  }
}
    </script>
</html>