Rechercher un mot dans une page et aller directement au mot.

**Beginner.** · 10/10/2018, 19h02

Voici un exemple : https://jsbin.com/siqosofuzo/edit?html,console,output

J'ai mis le texte dans un "container" de 300px de hauteur mais tu peux changer cette valeur...

**apdf1** · 10/10/2018, 19h25

Re,

Je te remercie infiniment cela est Nickel

Je te souhaite une bonne soirée

Max

**apdf1** · 26/11/2018, 17h24

Salut Beginner.

Je suis sur le code que tu m'avais fait qui est super j'aimerai lui apporter une modification, alors si tu passe par ici et que tu à le temps de me bricoler sa ton code parce que j'ai passé le WE à essayer et rien!

Alors quand j’appuie sur le bouton "removeHightlight" pour supprimer la surbrillance du texte j'essaie de remonter au départ j'ai essayer en CSS et en JavaScript sa rien donné?

Je te remercie

Max

**Beginner.** · 26/11/2018, 17h55

Salut,

Envoyé par apdf1

Je suis sur le code que tu m'avais fait qui est super j'aimerai lui apporter une modification, alors si tu passe par ici et que tu à le temps de me bricoler sa ton code parce que j'ai passé le WE à essayer et rien!

Je n'ai pas compris cette partie "...parce que j'ai passé le WE à essayer et rien!", c'est quoi "WE" ?

Envoyé par apdf1

Alors quand j’appuie sur le bouton "removeHightlight" pour supprimer la surbrillance du texte j'essaie de remonter au départ j'ai essayer en CSS et en JavaScript sa rien donné?

Tu veux qu'en plus de supprimer la surbrillance la scrolle bar revienne au début (tout en haut), c'est ça ?

**apdf1** · 26/11/2018, 18h08

Re,

WE= week end

Tu veux qu'en plus de supprimer la surbrillance la scrolle bar revienne au début (tout en haut), c'est ça ?

Tu as tout à fait compris.

@+

Max

**Beginner.** · 26/11/2018, 18h33

Ah ok week-end...

Pour ce que tu veux il y a juste une ligne de code à ajouter : https://jsbin.com/sumupikovo/1/edit?html,output

**apdf1** · 26/11/2018, 18h45

Re,

J'ai bien cherche je n'ai pas trouvé de ligne de code ajouter?

**Beginner.** · 26/11/2018, 19h24

Je l'ai déjà ajouté, teste le code...

La ligne ajoutée est : document.getElementById("container").scrollTop = 0 ;...

**apdf1** · 27/11/2018, 08h10

Bonjour Beginner.

Je te remercie.

Ton fichier fonctionne très bien et j'ai voulu lui mettre une scrollbar vertical avec un peu de couleur pour rendre plus joli mais apparemment sa ne l’accepte pas ou le code javascript n'est pas configurer pour cela.

je joint mon code pour voir exemple

Code HTML :

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <title>Recherche dans une page...</title>
 
    <style type="text/css">   
        
         body{background: #000;}
        
        .hightlightClass {
            /* background-color:yellow; */
            background-color: chocolate;
            color: bisque;
        }
         
        #container {
            height: 670px;width: 1400px;
            overflow: auto;
            margin-top: 10px;
            border: 1px solid green;
        }
                             /* =============scrollbar menu===================*/ 
                                    
        .scrollbar{
                margin-left: 10px;
                float: left;
                height: 630px;  /*hauteur du menu*/
                width: 1360px;  /*deplacement de la scroll vers la droite*/
                overflow-y: scroll;
                margin-bottom: 25px;
        }              
        #style-2::-webkit-scrollbar{
                width: 12px;
                background-color: #000;
        }             
        #style-2::-webkit-scrollbar-thumb{
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #D62929;
        } 
                             /* =============fin scrollbar menu===================*/ 
        .text{color: #fff;}
        
    </style>
</head>
 
<body>
    <div>
        <input type="text" id="findField" value="" placeholder="Tapez ici le nom à rechercher..." size="23" />       
        <button onclick="search();">Find!</button>
        <button onclick="removeHightlight();">removeHightlight</button>
    </div>
 
   <div id="container">
 
       <div class="scrollbar"id="style-2" >
 
        <div class="text">
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p>pierre</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p>max</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p>jean</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p>alain</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            <p>nadia</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        <div style="height:500px;"></div>
 </div>
 
    </div>
 
  <script>
 
    function search() {
      console.clear();
      removeHightlight();
 
      var container = document.getElementById("container");
      var word = document.getElementById("findField").value.trim().toLowerCase();  
 
      if (word == "") {
        //alert("Entrez un mot !");
        console.log("Entrez un mot !");
        return;
      }
 
      var sel = window.getSelection(); 
      var rangeContainer = document.createRange();
      rangeContainer.selectNodeContents(container);
      rangeContainer.collapse(true);
      sel.removeAllRanges();
      sel.addRange(rangeContainer);
 
 
      console.log("Début de la recherche du mot : ", word);
 
      if (window.find(word)) {
        var range = sel.getRangeAt(0);
        var hightlightSpan = document.createElement("span");
        hightlightSpan.className = "hightlightClass";
        hightlightSpan.appendChild(range.extractContents());
        range.insertNode(hightlightSpan);
        hightlightSpan.scrollIntoView(true);
        container.scrollTop -= 3;
      }
      else console.log("Le mot \"" + word + "\" n'a pas été trouvé");
 
      console.log("Fin de la recherche");
      sel.removeAllRanges();
 
    }
 
    function removeHightlight() {
 
      var hightlightSpanTab = document.getElementsByClassName("hightlightClass");
 
      while (hightlightSpanTab.length) {
        var parent = hightlightSpanTab[0].parentNode;
        while (hightlightSpanTab[0].firstChild) {
          parent.insertBefore(hightlightSpanTab[0].firstChild, hightlightSpanTab[0]);
        }
        parent.removeChild(hightlightSpanTab[0]);
      }
      document.getElementById("container").scrollTop = 0 ;
    }
 
  </script>
 
</body>
 
</html>

Je te remercie beaucoup

Max

**Beginner.** · 27/11/2018, 13h53

Eh bien le problème c'est qu'il semble que cela ne soit pas possible (nativement) avec tous les navigateurs, j'avais ouvert ce fil d'ailleurs : Donner un style aux scrollbars ?.

Si tu veux que cela fonctionne sur tous les navigateurs et ce de la même manière eh bien je crois qu'il faudra faire sa propre scrollbar...

**apdf1** · 27/11/2018, 14h16

Bonjour Beginner.

Est bien c'est bien dommage!

Merci

Rechercher un mot dans une page et aller directement au mot.

JavaScript

Discussions similaires

Partager

Partager