Changer de page sur appui d'une combinaison de touches

Version imprimable

14/01/2022, 19h07
L'AMI Yves

Changer de page sur appui d'une combinaison de touches

Bonsoir tout le monde, et bonne année !

J'ai une page qui contient un formulaire présentant un certain nombre d'options sur lesquelles l'utilisateur peut cliquer.

Je voudrais ajouter une option "secrète" (en javascript ?) qui ne sera accessible que par un code clavier (peut-être F6, ou Ctrl-Alt-S...)

J'ai (un peu !) cherché avec mon ami Google, mais pour tout dire, je n'ai pas vraiment compris, il me semble que ça devrait être simple...

Merci à ceux qui voudront bien éclairer ma lanterne.

AMIcalement.

Salut

Peut être que ce

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
<!DOCTYPE html>
<html lang="fr"> <!-- AAminimumHTML.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	</head>
	<body onkeydown="Analyse(event)">
 
		Démonstration: <br />
		Essayez avec les touches suivantes<br />
		"Ctrl+ Alt + S" ou "shift + Alt + D" ou "shift + Alt + F1" ou encor "shift + Alt + Ctrl"<br />
		<br />
			<span id="rep"></span>
 
		<!-- --------------------------------------------------------------------------------------- -->
		<script>
                        function Analyse(e){
                                let msg = "";
                                let PrevDefaut = false;
                                
                                if(e.ctrlKey && e.altKey && e.keyCode == 83){msg = "Ctrl + Alt + S";PrevDefaut=true}
                                if(e.shiftKey && e.altKey && e.key == "D"){msg = "shift + Alt + D";PrevDefaut=true}
                                if(e.shiftKey && e.altKey && e.key == "F1"){msg = "shift + Alt + F1";PrevDefaut=true;}
                                if(e.shiftKey && e.altKey && e.ctrlKey){msg = "shift + Alt + Ctrl";PrevDefaut=true;}
                                if (PrevDefaut===true){e.preventDefault();}
                                document.getElementById("rep").textContent = msg;
                        }
                //---------------------------------------------------------------------------------------
                </script>
	</body>
</html>

14/01/2022, 22h57
L'AMI Yves

Encore ProgElect ! Encore merci, ProgElect !

Il est un peu tard ce soir, je regarde demain et je te dis si ça me va.

Bonne nuit.
15/01/2022, 10h46
L'AMI Yves

Hello world !

Est-ce que c'est (encore !) moi qui ai de la peau de saucisson devant les yeux ?

Je crois comprendre l'exemple de ProgElect, c'est en effet en gros ce que je veux faire, et c'est en effet très simple, mais je cherche plus d'infos sur le "event", qui va être passé en argument à la fonction "analyse", alors je consulte mon ami Google en lui disant "onkeydown" : je n'ai trouvé aucune réponse qui semble parler de ce "event", qui va, de toute évidence, décrire la touche qui a été pressée. Les exemples que j'ai trouvés se contentent tous de conclure "vous avez touché votre clavier" !

L'exemple de ProgElect suggère que ce "event" a les composants ctrlKey, altKey, shiftKey, qui peuvent être Vrai ou Faux, keyCode, qui est numérique, et key, qui est un caractère, mais j'aurais aimé être sûr de bien comprendre, et de tout comprendre...

AMIcalement.
15/01/2022, 11h33
NoSmoking

Bonjour,

Citation:

Envoyé par L'AMI Yves

L'exemple de ProgElect suggère que ce "event" a les composants ctrlKey, altKey, shiftKey, qui peuvent être Vrai ou Faux, keyCode, qui est numérique, et key, qui est un caractère, mais j'aurais aimé être sûr de bien comprendre, et de tout comprendre...

tu trouveras toutes tes réponses dans, par exemple sur MDN, : Les objets KeyboardEvent, n'hésite pas à suivre les liens ;)

Salut

Après une nuit (qui porte conseil) j'ai réalisé qu'il fallait allé plus loin pour éviter que des petits malins atteignent le code source, d'où cette nouvelle version.

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
<!DOCTYPE html>
<html lang="fr"> <!-- EtudeKecodeNew.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
		<style>
                        /* ********************************************************************************** */
                </style>
		<script>
                        'use strict'; // force la déclaration des variables
                        //*********************************************************************************** 
                        //---------------------------------------------------------------------------------------
                </script>
	</head>
	<body onkeydown="Analyse(event)">
 
		Démonstration: <br />
		Essayez avec les touches suivantes<br />
		"Ctrl + Alt + S" ou "shift + Alt + D" ou "shift + Alt + F1" ou encor "shift + Alt + Ctrl"<br />
		<br />
		Mais aussi: "<span style="color:red">Ctrl + U</span>" et "<span style="color:red">F12</span>", lire dans la suite du code le pourquoi.
		<br />
		<span id="rep"></span>
		<br />
		<input type="text">
 
		<!-- --------------------------------------------------------------------------------------- -->
		<script>
                        function Analyse(e){
        let msg = "";
        let PrevDefaut = false;
        if(e.ctrlKey && e.altKey && e.keyCode == 83){msg = "Ctrl + Alt + S";PrevDefaut=true}
        if(e.shiftKey && e.altKey && e.key == "D"){msg = "shift + Alt + D";PrevDefaut=true}
        if(e.shiftKey && e.altKey && e.key == "F1"){msg = "shift + Alt + F1";PrevDefaut=true;}
        if(e.shiftKey && e.altKey && e.ctrlKey){msg = "shift + Alt + Ctrl";PrevDefaut=true;}
        
        //============================ Pourquoi detecter Ctrl + U et F12, =============================
        //=========== pour empecher la visualisation du code par l'explorateur du navigateur ==========
        //===== en passant la variable PrevDefaut=true on va annuler la propagation de l'évènement ====
        if((e.ctrlKey && e.keyCode == 85)||e.key == "F12"){msg = "Ctrl + U  ou   F12";PrevDefaut=true}
 
        if (PrevDefaut===true){e.preventDefault();}
        document.getElementById("rep").innerHTML = "<span style='color:limegreen'>"+msg+"</span>";
                        }
                        
                        //---------------------------------------------------------------------------------------
                </script>
	</body>
</html>

15/01/2022, 16h46
L'AMI Yves

@NoSmpking

Citation:

https://developer.mozilla.org/fr/doc.../KeyboardEvent

Ah oui, j'étais bien passé sur cette page, mais je n'avais pas fait le lien. Il était tard...!

@ProgElect
Tu lis dans mes pensées...?

AMIcalement.
15/01/2022, 18h01
L'AMI Yves

@ProgElect
Oui, tu lis même drôlement plus loin que moi ! Du coup, j'ai testé toutes les combinaisons de touches. En fait, ça n'est pas si long. Si un "petit malin" essaie de trouver ma "touche secrète", il ne mettra pas longtemps à la trouver. Il va me falloir être plus malin que ça pour qu'il ne puisse rien en faire...

Je me demande si, à la fin, il ne va pas falloir que j'achète un PC quantique...:D
15/01/2022, 18h57
L'AMI Yves

Je rends compte "en temps réel" de mon exploration du code proposé par ProgElect (j'espère ne pas trop saouler les gens).

1) Y a-t-il une raison particulière pour coder 'e.ctrlKey && e.altKey && e.keyCode == 83' plutôt que 'e.ctrlKey && e.altKey && e.key == "s"' ?

2) Ai-je raison de conclure que le code proposé est insuffisant, sachant le nombre d'autres combinaisons qui ouvrent la console sur d'autres outils ?
J'ai repéré F12, Ctl-U, Maj-F5, Maj-F7, Maj-F9, CtlMaj-I, CtlMaj-K, CtlMal-C, CtlMaj-E, et il y en a peut-être d'autres (je ne parle même pas de Mac ou de Linux) !

3) Ne serait-il pas beaucoup plus efficace d'intercepter tout simplement e.ctrlKey, e.altKey, e.shiftKey et e.key="F12", sachant que dans tous les cas, on sortira de ce module et on ouvrira un autre "<body> sans "onkeydown" ?

C'est un petit jeu amusant, mais fastidieux.

AMIcalement.
15/01/2022, 19h27
ProgElecT

Citation:

Envoyé par L'AMI Yves

...
1) Y a-t-il une raison particulière pour coder 'e.ctrlKey && e.altKey && e.keyCode == 83' plutôt que 'e.ctrlKey && e.altKey && e.key == "s"' ?

Si la combinaison contient la détection de shift mais aussi du s (minuscule) e.keyCode = 83, alors que si tu détectes e.key, il faudra S à cause du shift.

Citation:

2) Ai-je raison de conclure que le code proposé est insuffisant, sachant le nombre d'autres combinaisons qui ouvrent la console sur d'autres outils ?
J'ai repéré F12, Ctl-U, Maj-F5, Maj-F7, Maj-F9, CtlMaj-I, CtlMaj-K, CtlMal-C, CtlMaj-E, et il y en a peut-être d'autres (je ne parle même pas de Mac ou de Linux) !

Ben oui, il faut vérifier toutes ses touches/combinaisons de touches.

Citation:

3) Ne serait-il pas beaucoup plus efficace d'intercepter tout simplement e.ctrlKey, e.altKey, e.shiftKey et e.key="F12", sachant que dans tous les cas, on sortira de ce module et on ouvrira un autre "<body> sans "onkeydown" ?

Si tu ne vérifies que les touches e.ctrlKey ou e.altKey ou e.shiftKey ou e.key="F12", tu limites toutes les autres combinaisons qui contiennent l'une de ses touches, qui pourrait être utiles dans ton programme.

Citation:

C'est un petit jeu amusant, mais fastidieux.
AMIcalement.

Perso je suis à la retraite, donc j'ai le temps de programmer :aie:

Bonne fin de semaine.
16/01/2022, 10h25
NoSmoking
Citation:
Envoyé par ProgElecT

Code:

1 2 //============================ Pourquoi detecter Ctrl + U et F12, ============================= //=========== pour empecher la visualisation du code par l'explorateur du navigateur ==========
je ne sais pas quel est le but recherché mais dans ce cas il faut :
- supprimer l'accès via un click droit de la souris ;
- supprimer l'accès via les menus du navigateur ;
- supprimer l'accès à la barre d'adresse et interdire de mettre view-source: devant l'url ;
- supprimer la possibilité de désactiver le JavaScript.
16/01/2022, 10h50
ProgElecT

Salut

@NoSmoking, sans aller si loin, L'AMI Yves cherche à cacher des fonctionnalités accessibles que par le programmeur ou un ayant droit, un utilisateur lambda (n'ayant pas trop de connaissances en programmation) ne pourrait pas se servir du débugueur du navigateur pour voir le code source donnant cette possibilité.
16/01/2022, 11h44
NoSmoking

Oui mais si il connait l'existence de Ctrl + U alors il sait se promener dans les menus !
16/01/2022, 15h30
ProgElecT

Re

Citation:

Envoyé par NoSmoking

... alors il sait se promener dans les menus !

:aie:
C'est pourquoi il est illusoire de penser pouvoir protéger/cacher du code dès qu'un programme pour être joué doit passer par un navigateur.