Sélectionner un DIV au passage de la souris

**sebastiez** · 03/12/2014, 06h32

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 03/12/2014, 08h29

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

**sebastiez** · 03/12/2014, 12h11

Solution trouvé.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Sélectionner un DIV au passage de la souris

JavaScript

Discussions similaires

Partager

Partager