Changer de page sur appui d'une combinaison de touches

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

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.

**ProgElecT** · 14/01/2022, 22h19

Salut

Peut être que ce

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
<!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>

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

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.

**L'AMI Yves** · 15/01/2022, 10h46

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.

**NoSmoking** · 15/01/2022, 11h33

Bonjour,

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

**ProgElecT** · 15/01/2022, 12h23

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 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
<!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>

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

@NoSmpking

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.

**L'AMI Yves** · 15/01/2022, 18h01

@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...

**L'AMI Yves** · 15/01/2022, 18h57

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.

**ProgElecT** · 15/01/2022, 19h27

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.

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.

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.

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

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

Bonne fin de semaine.

**NoSmoking** · 16/01/2022, 10h25

Envoyé par ProgElecT

Code :

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

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.

**ProgElecT** · 16/01/2022, 10h50

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é.