Discussion :

[toulousain3117]

Bonjour à tous,

je vous écris ce jour car j'essaye de créer une fonction qui permet de rechercher un mot et y aller directement à la ligne du monde

la même fonction que firefox sur "Rechercher sur la page" est t'il possible de réaliser ce script en jquery ?

cordialement

[Toufik83]

oui c'est bien possible en utilisant indexOf(), et pour défiler la page on utilise scrollTo().

[SpaceFrog]

sauf que scrollTo sur quoi ??

il va falloir replacer l'occurrence du texte pour placer une balise avec une ancre pour arriver à y scroller...

[toulousain3117]

désolé du temps de réponse je n'étais pas revenu sur le forum,

est t'il possible sinon au click de simuler le ctrl f ?

[toulousain3117]

j'ai pu trouver un script que j'ai legerement modifier pour qu'il correspond à mes attentes,

sur le pc ça fonctionne mais pas sur les mobiles vous aurez une idee ?

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
<script>
  $(document).ready(function() {
findString = function findText(text) {
  alert("String \x22" + text + "\x22 found? " + window.find(text));
}
 
$('#but').on('click', function() {
                
                var val = $("#search").val();
                FindNext ();
                        
        });
 
});     
  </script>
 
      <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
           
        }
    </script>

[ProgElecT]

Salut

Et si tu mes tout entre les mêmes balises <script> .... </script> (sans préciser type="text/javascript")

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
<script>
  $(document).ready(function() {
findString = function findText(text) {
  alert("String \x22" + text + "\x22 found? " + window.find(text));
}
 
$('#but').on('click', function() {
 
		var val = $("#search").val();
		FindNext ();
 
	});
 
});	
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
 
        }
    </script>

[toulousain3117]

ça change rien

[toulousain3117]

Aprés multe recherche voici afin une solution qui marche aussi sur mobile :

La fonction :

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
 
      <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Champs vide");
                return;
            }
 
            var supported = true;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = false;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }
 
                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }
 
 
        }
    </script>

L'appel de la fonction : je l'ai adapté en jquery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$('#but').on('click', function() {
 
		var val = $("#search").val();
		FindNext ();
 
	});
 
	$('#findField').on('focus', function() {
		$("html, body").animate({scrollTop: 0},"slow");
 
	});
 
});

et comme il n'y a pas la recherche vers le haut j'ai rajouté le script permettant de remonté en haut des que le curseur est dans le champs :



et enfin voila le bouton :

Code html :

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

1
2
<input type="text" id="findField" value="" size="20" />
    <button id="but">Chercher</button>

[marycaLou]

Bonjour,

Je suis débutante en HTML. J'ai une page Web dans lequel je veux aussi simuler les touches CTRL+F. EN lisant le code sur cette discussion,, je suis un peu perdu.
Où doit -on insérer le code du "Script" et le code "jQuery". Pour le bouton en HTML, pas de problème.

J'ai un fichier en HTML qui est relié à un fichier "CSS" seulement.

Merci

[toulousain3117]

bonjour marycalou

Pour inséré le code tu dois mettre le script entre les balises <head></head>

le code tu dois aussi le mettre tel quel :

Code :

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

1
2
3
4
5
6
7
8
9
<script>
 $(document).ready(function() {
 
// ici tes scripts jquery et function js
 
 
	});
 
</script>

et bien sur en haut de page les fichiers d'appelle a la librairie jquery pour que le code fonctionne

Code :

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

1
2
		<script  src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>