Evènements keypress keydown

Version imprimable

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:

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

en dessous de

Code:

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

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

Code:

obj.attachEvent(....)

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

Code:

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

Résultat : NIET
En fin le code de test le plus proche du développement réel :
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 (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

28/08/2010, 11h01
Bovino

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

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

Code:

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é ? :?

bonjour,

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

1 2 3 4 5 6 7 8 <body onkeyup="keyup(event)"> clique ici ou touche F8 clique ici ou touche F9 clique ici ou touche F10 </body>
puis en JS :
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 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.

28/08/2010, 17h08
JLC83

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 :(

Sans inclusion HTML

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

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

Citation:

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.

28/08/2010, 19h40
JLC83

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:mrgreen:
Merci
28/08/2010, 22h31
Auteur

Citation:

Envoyé par JLC83

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

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 :whistle:

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

L'esprit tordu ? :mrgreen:
Je vois tout cet après-midi.
Merci