Je n'arrive pas à récupérer les évenements clavier (onkeypress, onkeydown)

Version imprimable

Bonjour à tous,

Je cherche à récupérer des évenements clavier sur un balise html quelconque.

Je suis donc en train de faire des tests, mais ils ne sont pas concluants. Il ne se passe absolument rien lorsque j'appuie sur les touches de mon clavier.

Voici le code (très simple) que j'utilise pour mes tests :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <style> div { border:2px solid black; padding:5px; background-color:yellow; } </style> </head> <body> <div onkeydown="alert('toto');">TOTO</div> </body> </html>
J'ai lu qu'il fallait que l'élement ai le focus. Comment donner le focus à un élement ? J'ai cliqué dessus, mais sans succès.

D'avance merci.

09/06/2010, 15h40
SpaceFrog

Comme tu l'as lu un element n'accepte le onkeydown que si il accepte le focus
Or un div ne prend pas le focus. ce qui est somme toute logique, il n'y a aucune raison de vouloir taper sur le clavier sur un element figé dans lequel on ne peut pas ecrire

deux possibilités:
rendre le div editable:

Code:

<div contenteditable onkeydown="alert('toto');">TOTO</div>

mais je ne suis pas sur de la compatibilité sur tous navigateurs

curieusement il semblerait que l'on puisse lui faire prendre le focus par l'intermédiaire d'un child:

Code:

<div onkeydown="alert('toto');"><input type='text' />TOTO</div>

quand l'input a le focus le div aussi 8O8O

Il serait sans doute plus utile que tu nous donnes la but final afin que l'on puisse t'orienter .
09/06/2010, 15h53
Difré91

Le but final...

Toujours le même problème, je dois gérer des évenement javascript sur une balise object, comme ici.

Mais je veux aussi pouvoir gérer des évenements clavier sur mon objet.

Mais là, je désespère, j'en viens à des solutions de plus en plus crade.

En fait, mon object contient du SVG, donc logiquement je devrait pouvoir gérer tout ça en ECMAscript dans mon document SVG.
Le problème, les problèmes même, sont :
- Je ne trouve nulle part de documentation assez fournie sur ECMAscript (notamment les transformations graphiques sur SVG)
- ECMAscript ne semble pas gérer les évenements sur la roulette de la souris (et cela me chagrine parce que c'est cool !).

Donc, désolé du changement de sujet, si quelqun connait un bon site avec de la doc ECMAscript...
09/06/2010, 16h06
SpaceFrog

la solution du div au dessus de la balise object ne te convient pas ?

à prioiri si tu donnes le focus à la balise object il devrait prendre les keydown
09/06/2010, 16h20
Difré91

Citation:

Envoyé par SpaceFrog

curieusement il semblerait que l'on puisse lui faire prendre le focus par l'intermédiaire d'un child:

Code:

<div onkeydown="alert('toto');"><input type='text' />TOTO</div>

quand l'input a le focus le div aussi 8O8O

Or on a vu que le div autour de l'objet en marchait pas. Donc l'objet n'est pas child du div, frère au mieux ^^.

De plus, le principe du masque, c'est bien d'empecher l'object d'avoir le focus pour pouvoir traiter les évenements javascript.

Je pense qu'en continuant dans cette voie, je vais avoir des trucs de plus en plus bidouillés (l'histoire du div, c'est déjà une grosse bidouille puisqu'on simule le focus sur l'object).

Donc, je pense que je vais devoir me résoudre à l'ECMAscript, même si moins puissant. Au moins, il y aura une certaine cohérence ! Si j'arrive à le faire marcher correctement ^^
09/06/2010, 16h25
SpaceFrog

Citation:

De plus, le principe du masque, c'est bien d'empecher l'object d'avoir le focus pour pouvoir traiter les évenements javascript.

NON
le but est d'empecher le click ... pas le focus ...

Code:

document.getElementsByTagName('object')[0].focus()

???

je viens de tester ceci avec succès

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
 
<script type="text/javascript">
IsIE=document.all
function init(){
var obj=document.getElementById('foo')
Haut=obj.offsetHeight+50
Larg=obj.offsetWidth+50
X=obj.offsetLeft-25
Y=obj.offsetTop-25
var bar=document.getElementById('mask')
bar.onclick=function(evt){
                                        alert('on m\'a cliqué !!!')
					document.getElementById('foo').focus();
			  		evt=(evt)?evt:window.event;
			  		if (evt.stopPropagation) {evt.stopPropagation();}
					else{evt.cancelBubble = true;}
					}
 
with(bar.style){
 top=X+'px'
 left=Y+'px'
 height=Haut+"px"
 width=Larg+"px"
 position='absolute'
 zIndex='100'
 border="solid 1px red"
 backgroundColor='white';
 verticalAlign='middle' }
bar.style.opacity = 10;
bar.style.filter = 'alpha(opacity=10)';
 
 }
</script>
</head>
 
<body onload="init()">
 
<span id='mask'> </span>
<object id="foo" data="img/test.mpg" type="video/mpeg" width="320" height="255">
  <param name="src" value="img/test.mpg">
  <param name="autoplay" value="false">
  <param name="autoStart" value="0">
  alt : <a href="data/test.mpg">test.mpg</a>
</object>
</body>
 
</html>

le click est intercepé l'object reçoit les touches ...

10/06/2010, 17h36
Difré91

Je n'avais pas encore testé ta solution, mais cela ne semble pas fonctionner dans mon cas.

Marlgré le .focus(), mon objet derrière ne semble pas avoir le focus. Pourtant, si j'enleve le div, mon objet répond bien aux commandes clavier.

Cela est peut être dû au fait que l'objet soit en SVG, je ne sais pas. En tout cas, c'est une vraie galère pour faire des choses qui paraissent simples à implémenter...
10/06/2010, 18h41
SpaceFrog

j'ai juste testé avec un lecteur vidéo et il prends bien le focus et accepte les touches clavier ..