Sélectionner un DIV au passage de la souris

Version imprimable

Bonjour,

A l'heure actuelle, j'utilise ce code :

Code:

<textarea name="textarea_selected" id="textarea_selected" cols="70" rows="15" onMouseOver="this.select();">Mon texte</textarea>

Je cherche à présent à faire exactement la même chose mais en sélectionnant le contenu d'un DIV en précisant que l'objectif est de conserver la mise en forme du texte.

Par exemple : (bien évidemment ça ne fonctionne pas ^^)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="div_selected" onMouseOver="this.select();> <h1>Titre </h1> <h2>Sous-titre</h2> <p>Un court paragraphe. </p> <ul> <li>Ligne 1</li> <li>Ligne 2</li> <li>Ligne 3</li> </ul> <blockquote> <p>URL : <a href="http://www.google.fr">www.google.fr</a></p> </blockquote> </div>
Quelqu'un aurait une idée ?

;) Merci

03/12/2014, 08h29
SpaceFrog

forcément un div n'a pas de value ...
Récupère son innerHTML

Solution trouvé.

Je poste la réponse au cas ou ça pourrait intéresser quelqu'un ;)

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
52
53
54
55
56
57
58
59
60
61
62
63
 
<head>
 
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
function selectText() {
    var doc = document;
    var text = this;    
 
    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        console.log(range);
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}
 
[].forEach.call(document.getElementsByClassName('div_selected'), function(item) {
  item.onmouseover = selectText;  
});
}//]]>
</script>
 
</head>
<body>
 
<div class="div_selected">
  <h1>Titre  </h1>
  <h2>Sous-titre</h2>
  <p>Un court paragraphe. </p>
  <ul>
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 3</li>
  </ul>
  <blockquote>
    <p>URL : <a href="http://www.google.fr">www.google.fr</a></p>
  </blockquote>
</div>
 
<h1>Hello</h1>
 
<div class="div_selected">
  <h1>Titre  </h1>
  <h2>Sous-titre</h2>
  <p>Un court paragraphe. </p>
  <ul>
    <li>Ligne 1</li>
    <li>Ligne 2</li>
    <li>Ligne 3</li>
  </ul>
  <blockquote>
    <p>URL : <a href="http://www.google.fr">www.google.fr</a></p>
  </blockquote>
</div>
 
</body>