Détecter la touche ctrl (control)

Version imprimable

Bonsoir,
cela fait plusieurs tutos (ici et sur le net) pour me permettre de détecter la touche ctrl, mais je n'arrive pas à en faire fonctionner un seul.

Je voudrais détecter la touche ctrl valable sur toute la fenêtre mais je n'y arrive pas.
Auriez-vous une solution assez simple à appliquer ?

Pour ce code, je voudrais éviter de mettre du code JS dans le body si possible car j'ai un fichier JS externe.

(J'ai opéra et firefox)

Le code trouvé sur la FAQ javaScript par exemple je l'ai adapté comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 function detectTouche(e){ if(parseInt(navigator.appVersion,10) >=4){ if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ... console.log(String.fromCharCode(e.which)+" "+e.which); } else{ // pour Internet Explorer console.log(String.fromCharCode(e.keyCode)+" "+e.keyCode); } } }
Et je l'initie avec ça :

Code:

window.onkeydown=detectTouche(event);

Mais quelque soit la touche pressée Opéra affiche undefined à la ligne où se trouve la première console.log().

Le code original dans la FAQ javaScript est celui-ci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function detectTouche(e){ if(parseInt(navigator.appVersion,10) >=4){ if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ... document.getElementById('zone').value = String.fromCharCode(e.which); document.getElementById('zone1').value = e.which; } else{ // pour Internet Explorer document.getElementById('zone').value = String.fromCharCode(e.keyCode); document.getElementById('zone1').value = e.keyCode; } } }
Avec ce code en appel :
Code:

1 2 3 4 <body onkeydown="detectTouche(event)"> <input type="text" id="zone" size="30" /> <input type="text" id="zone1" size="30" /> </body>
Je l'ai adapté car je ne veux pas mettre de code dans le body, car j'ai un fichier externe JS et je veux avoir le code dedans si possible ;)

Dans le code de la FAQ on remarque des guillemets :

Code:

<body onkeydown="detectTouche(event)">

Avec ces guillemets rien ne se passe sur Opéra mais sans guillemets j'ai au moins un message qui m'indique que la touche pressée est indéfinie, donc je l'ai gardé sans guillemets ;)

22/01/2016, 00h23
progdebutant
Le message indefined venait du fait que j'avais mis ce code au mauvais endroit (appel de la fonction avant le chargement du document).

Code:

window.onkeydown=detectTouche(event);

Donc maintenant je n'ai plus de message indéfined par contre je n'ai plus aucun messages :/

Dernière modif donc qui supprime le message indéfined :
Code:

1 2 function init(){ // Appelée par window.onload. window.onkeydown=detectTouche(event);
Mais toujours pas de détection de la touche pressée pour le moment.
22/01/2016, 22h00
progdebutant

Bonsoir, je voudrais détecter la touche ctrl dans cette commande :

Code:

if ( (move)&&(détection de ctrl) ) console.log('ctrl pressée');

Y a t'il une personne qui pourrait me dépanner ?

Bonjour,

Code:

1
2
3
4
5
6
if (event.ctrlKey) {
  alert ('Touche CTRL enfoncée');
}
else {
  alert ('Touche CTRL non activée');
}

Salut ;)

Merci NoSmoking !!!

Comment je pourrais l'appliquer dans mon code ? Car j'ai fait plusieurs essais différents et j'ai chaque fois un message d'erreur différent.

EDIT : J'ai fait ceci dorénavant et je n'ai plus de message d'erreur mais il ne se passe rien, on dirait que la fonction touches() n'est jamais appelée.

// détection de la touche "control".
Code:

1 2 3 4 5 6 7 8 9 10 function touches(event){ if (event.ctrlKey) { alert ('Touche CTRL enfoncée'); } else { alert ('Touche CTRL non activée'); } var ctrl=event.ctrlKey; return ctrl; }
// Appelée par setInterval.
Code:

1 2 3 4 5 6 7 function test(){ var move=true; // Teste la touche "control" (ctrl). if(document.onkeypress){var ctrl=touches(event);}else{var ctrl=false;} if ( (move)&&(ctrl) ) console.log('ctrl pressée'); // ici il faudrait que ctrl soit reconnu. }
Appelée par window.onload;
Code:

1 2 3 4 function init(){ setinterval ("test()",30); }
Ma difficulté vient du fait que je ne sais pas utiliser et où placer le code que tu m'as donné :/

24/01/2016, 12h42
progdebutant

J'ai mis à jour le post précédent (ci-dessus)
Cette fois je n'ai aucun message d'erreur mais il ne se passe rien quand je presse ctrl.
EDIT : Je viens de mettre un alert('coucou') pour tester, dans la fonction touches(event){} et on dirait que cette fonction n'est jamais appelée en fait.
24/01/2016, 14h03
beekeep

Bonjour,

les propriétés ctrlKey ou altKey indiquent si les touches ctrl ou alt sont pressées lorsqu'une autre touche est pressée. (C ou Ctrl+C ?)
24/01/2016, 16h55
progdebutant

Ah tu veux dire que ctrlkey n'est pas détectée seule mais seulement si elle est associée à une autre touche ?
Mon but est de détecter seulement la touche ctrl et associée au mouvement curseur souris (qui sera indiqué par move) je vais pouvoir faire une action.
Mais pour le moment je butte sur la détection de ctrl que je ne sais pas appliquer dans mon code.
24/01/2016, 17h31
NoSmoking

Citation:

Mon but est de détecter seulement la touche ctrl et associée au mouvement curseur souris...

dans ce cas analyse l'état de la touche à ce moment là.
24/01/2016, 17h41
progdebutant

Le problème c'est que si je fais comme tu dis, l'action que je veux faire va se dérouler seulement quand je bouge la souris, hors ce que je veux c'est détecter le ctrl quand la souris est hors d'une zone de pixel et cette sortie de zone est indiquée par "move", c'est pour ça que je l'ai mis dans le if(move)....

En fait je pense que je me suis mal exprimé précédement.
Comment je pourrais faire ?

Citation:

(...)ce que je veux c'est détecter le ctrl quand la souris est hors d'une zone de pixel et cette sortie de zone est indiquée par "move"...

10 posts pour en arriver à enfin connaitre le contexte d'utilisation de ta fonction ! (même si c'est pas trop clair pour moi).

Je ne sais pas si je vais répondre juste à ta problèmatique !

• Sur l'événement keydown tu testes la ctrlKey et si enfoncée tu affectes à ton élément une fonction de mousemove.
• Sur l'événement keyup tu testes la ctrlKey et si relâchée tu supprimes à ton élément sa fonction de mousemove.

Voilà pour un principe pouvant être appliqué.

Exemple de code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var oZone = document.getElementById('zone'),
    oInfo = document.getElementById('info_mouse');
document.onkeydown = function(e) {
    e = e || window.event;
    // si touche CTRL et fonction non définie
    if (e.ctrlKey && !oZone.onmousemove) {
        // affectation fonction sur move
        oZone.onmousemove = function(e) {
            e = e || window.event;
            oInfo.innerHTML = 'x : ' + e.clientX + ' y : ' + e.clientY;
        };
    }
};
document.onkeyup = function(e) {
    e = e || window.event;
    // si touche CTRL relachée
    if (!e.ctrlKey) {
        // annule fonction sur move
        oZone.onmousemove = null;
        oInfo.innerHTML = 'Key CTRL UP';
    }
};

et l'exemple complet

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
50
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Affectation sur event.ctrlKey</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin:0;
  padding:0;
  font: 1em/1.5 Verdana, sans-serif;
}
#zone {
  width:40em;
  height:40em;
  margin:5em auto;
  background:#eef;
}
</style>
</head>
<body>
<div id="zone">
  <div id="info_mouse"></div>
</div>
<script>
var oZone = document.getElementById('zone'),
    oInfo = document.getElementById('info_mouse');
document.onkeydown = function(e) {
    e = e || window.event;
    // si touche CTRL et fonction non définie
    if (e.ctrlKey && !oZone.onmousemove) {
        // affectation fonction sur move
        oZone.onmousemove = function(e) {
            e = e || window.event;
            oInfo.innerHTML = 'x : ' + e.clientX + ' y : ' + e.clientY;
        };
    }
};
document.onkeyup = function(e) {
    e = e || window.event;
    // si touche CTRL relachée
    if (!e.ctrlKey) {
        // annule fonction sur move
        oZone.onmousemove = null;
        oInfo.innerHTML = 'Key CTRL UP';
    }
};
</script>
</body>
</html>

24/01/2016, 22h45
progdebutant

Whoaaaa

Merci NoSmoking je vais essayer ces codes et répondrais demain matin ;)

Est-ce que je peux mettre le script JS du body dans un fichier js externe ?

J'avoue que je sature un peu j'ai passé la journée et une part de la nuit à chercher la solution dans des forums et ici :/
25/01/2016, 01h39
progdebutant

Salut ;)

je te remercie beaucoup de ton aide, en plus ça me permet de mieux préciser mon problème car tout seul j'ai du mal à y voir clair, maintenant je sais expliquer clairement ce que je souhaite faire :

1) Le message "ctrl détecté" doit s'afficher dés qu'on presse la touche "ctrl" quelque soit la position de la souris.
2) La sortie de la souris hors du carré bleu doit aussi être détectée quelque soit l'état de la touche ctrl.
3) Les deux détections combinées provoquent une action, comme afficher un message dans le carré.

Voilà j'ai testé le code précédent et il fonctionne bien mais il ne réagit pas comme le principe que j'ai maintenant défini.
C'est génial ta façon de programmer simplement et vite un truc comme ça.
25/01/2016, 18h13
progdebutant

J'avoue que je suis un peu dégouté :

Citation:

51 utilisateur(s) sur ce forum. (4 utilisateur(s) et 47 invité(s))

En 4 jours d'affichage du problème, un seul qui a tenté de m'aider (merci NoSmoking).
J'imagine qu'à ce rythme mon message peut attendre un mois sans qu'il y ait plus de pros motivés à aider un "non pro".

Je sais bien que c'est de la gentillesse d'aider et pas une obligation heureusement mais quand même aider les non pros c'est quelque chose que peuvent faire les pros je crois sur ce forum, sinon pourquoi viendrions-nous les consulter.

Comme j'y comprend vraiment rien à ces événements "onkey" cela fait 4 jours te nuits que je me casse la tête à chercher une solution à ce problème :/

Avec de tels commentaires tu ne vas pas te faire que des amis sur le forum et visiblement cela à commencé, nous avons tous le droit à une vie en dehors du forum, d'autant que ton problème n’était pas vraiment bien exprimé ;)

Ceci étant ...

Citation:

La sortie de la souris hors du carré bleu doit aussi être détectée quelque soit l'état de la touche ctrl.

cela se précise, il te faut donc observer l'événement mouseout de ta zone
ajoute le code ci dessous dans l'exemple que je t'ai donné et teste en quittant la zone avec et sans la touche CTRL enfoncée.
Code:

1 2 3 4 5 6 7 8 9 oZone.onmouseout = function(e) { e = e || window.event; if (e.ctrlKey) { this.style.backgroundColor = '#fee'; } else { this.style.backgroundColor = '#eef'; } };

Citation:

Avec de tels commentaires tu ne vas pas te faire que des amis sur le forum et visiblement cela à commencé, nous avons tous le droit à une vie en dehors du forum, d'autant que ton problème n’était pas vraiment bien exprimé

Oui c'est vrai je sais, comme je ne m'y connais pas j'étais pas sûr de ma façon de poser le problème mais au fur et à mesure tes interventions m'ont fait trouvé la bonne façon de le présenter.
Ah je vois que tu es au courant que je suis un peu le vilain canard noir du forum ;)

Mais sincèrement j'ai remarqué qu'il y a tellement de bons sujets intellectuels dans ce site que les pros sont trop occupés sur ces sujets pointus et donc il ne leur reste plus de temps pour s'occuper des nuls comme moi, qui sommes même pas capable de comprendre comment utiliser un event keycode ;)

En tous cas merci de ton temps Nosmoking ^^

Bah si je savais me débrouiller seul j'essaierais de pas demander de l'aide :/

Moi qui ne suis pas pros et qui fait plein de choses à coté j'aime bien quand même aider les autres si je peux même si parfois je ne connais pas la solution mais je pose des questions qui peuvent souvent aider à trouver.

Bon je suis content d'avoir ton code, je vais tester ;)

Hum je crois que je sais pas où le placer le code :/

J'ai rien qui se produit :/
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 <script> var oZone = document.getElementById('zone'), oInfo = document.getElementById('info_mouse'); document.onkeydown = function(e) { e = e || window.event; // si touche CTRL et fonction non définie if (e.ctrlKey && !oZone.onmousemove) { // affectation fonction sur move oZone.onmouseout = function(e) { e = e || window.event; if (e.ctrlKey) { this.style.backgroundColor = '#fee'; } else { this.style.backgroundColor = '#eef'; } }; } }; document.onkeyup = function(e) { e = e || window.event; // si touche CTRL relachée if (!e.ctrlKey) { // annule fonction sur move oZone.onmousemove = null; oInfo.innerHTML = 'Key CTRL UP'; } }; </script>
Bon après plusieurs essais j'en suis arrivé à ça ci-dessous mais ça ne fonctionne pas, et pas de messages d'erreurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <script> var oZone = document.getElementById('zone'), oInfo = document.getElementById('info_mouse'); var move=false; if (document.onkeydown){ if(move && e.ctrlKey) oZone.style.backgroundColor = '#eef'; } if (document.onkeyup){ //move=false; oZone.style.backgroundColor = '#fee'; } if (oZone.onmouseout){ move=true; } if (oZone.onmouseover){ move=false; } </script>
Pfff, je vais pas en sortir, ça fait des heures que je tente diverses manières.

Faudrait que je trouve une école d'informatique par chez moi et que je leur soumette ça en exercice ;)

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhh !

J'ai trouvé !!!

à 3h du mat j'ai fini par trouver cette saleté de solution ! (ci-dessous, si ça peut servir).
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 50 51 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Affectation sur event.ctrlKey</title> <meta name="Author" content="NoSmoking"> <style> html, body{ margin:0; padding:0; font: 1em/1.5 Verdana, sans-serif; } #zone { width:40em; height:40em; margin:5em auto; background:#eef; } </style> </head> <body> <div id="zone"> <div id="info_mouse"></div> </div> <script> var oZone = document.getElementById('zone'), oInfo = document.getElementById('info_mouse'); var move=false; document.onkeydown=function(e){ if(move && e.ctrlKey) oZone.style.backgroundColor = '#fee'; } document.onkeyup=function(e){ //move=false; oZone.style.backgroundColor = '#eef'; } oZone.onmouseout=function(){ move=true; console.log(move); } oZone.onmouseover=function(){ move=false; console.log(move); } </script> </body> </html>
Merci encore pour tout NoSmoking, je sais pas comment te dire ce grand service que tu m'as rendu !
C'est avec tes codes et questions que j'ai fini par trouver sinon je serais encore à quémander une aide pendant très longtemps :/