Evènements keypress keydown

**JLC83** · 28/08/2010, 10h43

Bonjour,
Mon client demande que certaines fonctions implémentées - et qui fonctionnent déjà sur le site en exploitation - puissent être appelées par raccourcis claviers.
Les touches F8, F9 et F10 sont d'ailleurs visées.
J'ai donc ajouté dans le code :

Code :

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

cible.addEventListener("keypress",lesKeys,false);

en dessous de

Code :

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

cible.addEventListener("click",lesKeys,false);

Résultat : NIET

Evidemment, le code ci-dessus est raccourci ; il comprend en réalité la possibilité IE :

Code :

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

obj.attachEvent(....)

Puisque cela ne fonctionne pas, je suis revenu au DOM antérieur :

Code :

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

cible.onkeypress = function(){blabla... ;};

Résultat : NIET
En fin le code de test le plus proche du développement réel :

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
(function(){
	if(window.addEventListener) window.addEventListener("load", init, false);
	else if (window.attachEvent) window.attachEvent("onload", init);
 
	function init(){
		var ob = new obj();
	}
	function obj() {
		var this4Event = this;//fermeture
		this.name='';
		this.container = document.getElementById('Bob');
		this.container.innerHTML="Bob";
		this.alertName = function () {
			alert( this.name);
		}
		this.eventclickhandler = function(e) {
			alert(e.type);
			this4Event.mess('Bien');
			alert (this4Event.name);
		};
		addEvent(this.container,"click",this.eventclickhandler) ;
		addEvent(this.container,"keypress",this.eventclickhandler) ;
		addEvent(this.container,"keydown",this.eventclickhandler) ;
	}
	obj.prototype.mess = function(mes){
		this.name = mes;
	};
	function addEvent(obj, evType, fn) {
		if (obj.addEventListener){//Mozilla – firefox ….
			obj.addEventListener(evType, fn, false);
			return true;
		} 
		else if (obj.attachEvent){//IE
			var r = obj.attachEvent("on"+evType, fn);
			return r;
		} 
	}
})();

Fonctionne très bien pour l'évènement "click" seulement

J'imagine que vous avez déjà goûté à ces joyeusetés... : des solutions ?
Merci

**Bovino** · 28/08/2010, 11h01

Salut.
Ta fonction addEvent doit retourner false pour inhiber le click sur un onkeypress.

**JLC83** · 28/08/2010, 11h42

Merci.
J'ai donc modifié la fonction addEvent ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
	function addEvent(obj, evType, fn) {
		if (obj.addEventListener){
			obj.addEventListener(evType, fn, false);
			return false;
		} 
		else if (obj.attachEvent){
			var r = obj.attachEvent("on"+evType, fn);
			return false;
		}

Hélas, aucun effet perceptible.
Peut-être changer d'activité ?

**Auteur** · 28/08/2010, 13h07

bonjour,

le truc est qu'il faut placer le onkeyup sur la balise body :

Code html :

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

1
2
3
4
5
6
7
8
<body onkeyup="keyup(event)">
 
<span onclick="clic1()">clique ici ou touche F8</span><br/><br/>
<span onclick="clic2()">clique ici ou touche F9</span><br/><br/>
<span onclick="clic3()">clique ici ou touche F10</span><br/><br/>
 
 
</body>

puis en JS :

Code javascript :

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
 
function keyup(ev)
{
	if (ev.keyCode==119) //F8
	{
		clic1();
	}
	if (ev.keyCode==120) //F9
	{
		clic2();
	}
	if (ev.keyCode==121) //F10
	{
		clic3();
	}
 
}
 
 
function clic1()
{
	alert("Clic n°1");
}
 
function clic2()
{
	alert("Clic n°2");
}
 
 
function clic3()
{
	alert("Clic n°3");
}

Maintenant je ne trouve pas très judicieux d'utiliser des touches Fxx comme raccourcis car ils sont parfois utilisés par les navigateurs.
Dans mon cas F10, active le menu. Je suis donc obligé d'appuyer deux fois sur la touche pour voir le message.

A noter que les touches F11 et F12 ne sont pas gérées par le javascript.

**JLC83** · 28/08/2010, 17h08

Merci mais le but est de produire un code unobstrusive... si possible
Pas de javascript dans le html...
Pour ce qui est des touches Fxx, je suis bien d'accord mais le client est roi

**Auteur** · 28/08/2010, 19h26

Sans inclusion HTML

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
 
function keypress(ev)
{
	if (ev.keyCode==119) //F8
	{
		clic1();
	}
	if (ev.keyCode==120) //F9
	{
		clic2();
	}
	if (ev.keyCode==121) //F10
	{
		clic3();
	}
 
}
 
 
function clic1()
{
	alert("Clic n°1");
}
 
function clic2()
{
	alert("Clic n°2");
}
 
 
function clic3()
{
	alert("Clic n°3");
}
 
 
function setEvent()
{
	document.getElementById("span1").onclick = function(){clic1()};
	document.getElementById("span2").onclick = function(){clic2()};
	document.getElementById("span3").onclick = function(){clic3()};
 
	document.onkeydown = function(event){keypress(event?event:window.event)};
	// ou sur le keyup
	//document.onkeyup = function(event){keypress(event?event:window.event)};
} 
window.onload = function(){setEvent()};

Il faut bien sûr que les éléments visés aient un id

Code html :

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

1
2
3
4
 
<span id="span1">clique ici ou touche F8</span><br/><br/>
<span id="span2">clique ici ou touche F9</span><br/><br/>
<span id="span3">clique ici ou touche F10</span><br/><br/>

Envoyé par JLC83

Pour ce qui est des touches Fxx, je suis bien d'accord mais le client est roi

rien ne t'interdit de le conseiller

C'est ton rôle aussi.

**JLC83** · 28/08/2010, 19h40

Merci,
Demain matin plutôt que de monter au village, je teste le code proposé. Merci !
Pour les conseil au client... un produit pour dissoudre les têtes de pioches peut-être

Merci

**Auteur** · 28/08/2010, 22h31

Envoyé par JLC83

Pour les conseil au client... un produit pour dissoudre les têtes de pioches peut-être

voici un produit : prend un navigateur et personnalise les touches de raccourcis. Comme tu as l'esprit tordu, tu prends par exemple les touches F8, F9 et F10

avec Opera c'est faisable, avec FF c'est faisable mais c'est plus compliqué :
http://www.mozilla.org/unix/customizing.html#keys

**JLC83** · 30/08/2010, 10h51

L'esprit tordu ?

Je vois tout cet après-midi.
Merci

Evènements keypress keydown

JavaScript

Discussions similaires

Partager

Partager