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

**Difré91** · 09/06/2010, 16h21

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 :

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

**SpaceFrog** · 09/06/2010, 16h40

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 :

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

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

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

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

quand l'input a le focus le div aussi

Il serait sans doute plus utile que tu nous donnes la but final afin que l'on puisse t'orienter .

**Difré91** · 09/06/2010, 16h53

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

**SpaceFrog** · 09/06/2010, 17h06

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

**Difré91** · 09/06/2010, 17h20

Envoyé par SpaceFrog

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

Code :

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

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

quand l'input a le focus le div aussi

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

**SpaceFrog** · 09/06/2010, 17h25

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 :

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

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

???

**SpaceFrog** · 09/06/2010, 17h29

je viens de tester ceci avec succès

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

**Difré91** · 10/06/2010, 18h36

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

**SpaceFrog** · 10/06/2010, 19h41

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

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

JavaScript

Discussions similaires

Partager

Partager