Discussion :

[Devilju69]

Bonjour ou Bonsoir à tous,

J'ai une petite question. Je voulais savoir si c'était possible d'afficher un mot dans un INPUT quand on clique sur la touche "1" par exemple.

Je m'explique, l'utilisateur a un input pur écrire que des chiffres, et je voudrais que lorsqu'il appuie sur la touche du clavier numerique "1", ca ecrit "test".

C'est possible ?
Si oui, pouvez vous m'aider ?

[Watilin]

C'est possible, et c'est même très simple. Donc c'est toi qui vas le faire.
Juste une question : où veux-tu qu s'affiche « test » ? Dans l'input lui-même ou dans une autre balise HTML ?

Pour réagir aux évènements du clavier, il faut que l'élément qui a le focus (c'est-à-dire, en général, l'élément dans lequel il y a le curseur clignotant) enregistre un gestionnaire d'évènement. C'est pas trop compliqué :

Code :

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

monInput.addEventListener("keypress", maFonction);

Bien entendu, tu devras adapter les variables monInput et maFonction selon ton code. maFonction sera appelée par le navigateur à chaque fois qu'un évènement keypress est déclenché, et elle recevra un argument event, tu devras donc la déclarer comme ça :

Code :

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

1
2
3
function maFonction( event ){
   ...
}

Il y a plusieurs types d'évènements clavier : keyup, keydown, keypress, change et le petit dernier input. Je te renvoie à un post récent de moi pour les détails. Comme ici, il s'agit de détecter un caractère visible (« 1 »), le keypress me paraît le plus adapté.

C'est un début de solution. J'attends ta réponse à ma question pour t'en dire plus

[Devilju69]

Dans le même input !

Merci pour ces renseignements, je me renseigne

[SpaceFrog]

quand on clique sur la touche "1"

cliquer le clavier avec la souris ??? ça je sais pas faire ...

[Watilin]

l'utilisateur a un input pur écrire que des chiffres, et je voudrais que lorsqu'il appuie sur la touche du clavier numerique "1", ca ecrit "test".

Dans le même input !

Donc en fait si j'ai bien compris tu voudrais écrire « test » dans un input dans lequel on ne peut écrire que des nombres ?

[Devilju69]

Bonjour à tous,

Je n'arrive à rien ! Ca m'enerve. Je débute en javascript et j'ai pas assez de connaissances.

Je veux dire quand l'utilisateur utilise la touche 1 du clavier (il a accès seulement à un pavé numérique).

Je voudrais écrire "test" soit dans le même input soit dans un div ou autre ; bref n'importe où

[Devilju69]

J'ai enfin quelque chose mais pas exactement ce que je veux

Voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  function quelle_touche(evenement)
   {
       var touche = window.event ? evenement.keyCode : evenement.which;
       if (touche==48)
	   {
			document.getElementById("form_id").elements["nom_input"].value = 'Test- ';
	   }
	   if (touche==49)
	   {
			document.getElementById("form_id").elements["nom_input"].value = 'Test2- ';
	   }
   }

Cela fonctionne bien mais, ça m'efface mon contenu. Je veux rajouter a chaque fois.

Par exemple, si on tape "10", il faut écrire "Test2 - Test-". Et pour l'instant, cela supprime la première valeur

[Devilju69]

Il fallai rajouter un "+" juste avant le "=" c'est ça ?

[Watilin]

Il fallai rajouter un "+" juste avant le "=" c'est ça ?

C'est ça. Après si tu te sens courageux tu peux peaufiner la chose en prévoyant les cas où le contenu doit être effacé, par exemple si l'utilisateur tape deux fois la même chose (je dis ça un peu au hasard mais tu vois ce que je veux dire).

Il y a un point de ton code que, je pense, tu n'as pas bien compris :

Code :

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

    var touche = window.event ? evenement.keyCode : evenement.which;

L'opérateur ?:, le seul opérateur ternaire de JavaScript (et de pas mal d'autres langages), est une sorte de if/else raccourci. Il est toujours possible de l'écrire autrement, et je connais plusieurs développeurs qui préfèrent ne pas s'en servir du tout. Réécrivons ton bout de code :

Code :

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

1
2
3
4
5
6
var touche;
if (window.event) {
    touche = evenement.keyCode;
} else {
    touche = evenement.which;
}

Ce code marche sans doute dans la plupart des cas, mais il me dérange un peu. Le test de window.event permet de prendre en charge les anciennes versions d'IE pour lesquelles les gestionnaires d'évènements ne reçoivent pas d'event en paramètre, mais où un event existe au niveau global. Le plus souvent, on voit plutôt des choses de cette forme :

Code :

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

1
2
3
4
fonction quelle_touche( evenement ){
    evenement = evenement || window.event;
    ...
}

De l'autre côté, nous avons cette propriété event.which qui est apparue après event.keyCode et event.charCode dans le but (plus ou moins atteint) d'uniformiser les deux. C'est donc une fonctionnalité relativement récente, qui de fait n'existe pas sous les anciennes versions d'IE, les mêmes qui ne passent pas l'event en paramètre. Mais ce ne sont pas les seuls.

Je pense que le test choisi ne correspond pas exactement à la situation. Pourquoi ne pas tester directement la propriété qu'on veut utiliser, en l'occurence evenement.which ?

Code :

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

1
2
3
4
5
if (evenement.which) {
    touche = evenement.which;
} else {
    touche = evenement.keyCode;
}

Il y a une philosophie qui se cache derrière : en testant l'existence de window.event, tu testes en réalité si le navigateur est une ancienne version d'IE. Et ensuite, partant de ce constat, tu emploies des fonctionnalités supposées exister sous ces versions d'IE. C'est une méthode qu'on appelle « browser detection ». Comme je l'ai dit, il est plus fiable de tester directement la présence de la fonctionnalité qu'on veut utiliser, peu importe le navigateur. Cette méthode-là s'appelle « feature detection » et elle est plus souple.