Trigger jQuery et simulation keypress [Résolu]

Turbulator · 16/12/2011, 13h16

Bonjour

Je m'amuse un peu à essayer de faire une visionneuse de slides google docs.
Avec 2 boutons gauche droite, je souhaite passer à l'écran précédent/suivant.
Pour cela, lorsque que j'ai un clic sur un des boutons, je souhaite utiliser un trigger pour simuler l'appui sur une touche gauche/droite comme si c'était l'utilisateur qui l'avait fait.
Mais hélas, rien ne se passe ...

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
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<html>
<head>
	<title>Slides viewer</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
			$("iframe").focus();
			$("#prev").click(function() {
				var press = jQuery.Event("keypress");
				press.which = 37;
				$("iframe").trigger(press);
			});
			$("#next").click(function() {
				var press = jQuery.Event("keypress");
				press.which = 39
				$("iframe").trigger(press);
			});	
		});
	</script>
</head>
<body>
	<input id="prev" type="button" value="<"/>
	<input id="next" type="button" value=">"/>
	<div id="slides">
 		<iframe src="https://docs.google.com/present/view?id=0AX5OB7HMRFTQZDR3czVwal8yMjdmdG0zOTljOQ"
 			width="100%" 
	 	    	height="100%" 
	 	    	scrolling="auto" 
	 	    	frameborder="0" 
	 	    	id="viewer" />
 	 </div>		    	
 </body>

Quelqu'un a t-il déjà essayé ce genre de manipulation avec les trigger de type keypress ?
Ou a une meilleure api js pour faire ce genre de chose ?
Merci

Bovino · 16/12/2011, 14h00

Il me semble que la propriété which est readonly...

Turbulator · 21/12/2011, 17h31

Merci de ta réponse mais apparemment la propriété which ne fonctionne pas pour les flèches, il faut que j'utilise keyCode. Par contre, which fonctionne pour les lettres. Les 2 étant bien en write (j'ai pu expérimenter quelques cas).

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
 
<html>
<head>
	<title>Slides viewer</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
			$("#slides").focus();
			$("#prev").click(function() {
				var press = jQuery.Event("keypress");
				press.which = 112;
				$("iframe").focus();
				$(document.documentElement).trigger(press);
			});
			$("#next").click(function() {
				var press = jQuery.Event("keypress");
				press.keyCode = 39;
				$("iframe").focus();
				$(document.documentElement).trigger(press);
			});
			$("iframe");
 
			$(document.documentElement).keypress(function (event) {
			  alert("keyCode="+event.keyCode);
			  alert("which="+event.which);	
			});
		});
	</script>
</head>
<body>
	<input id="prev" type="button" value="<"/>
	<input id="next" type="button" value=">"/>
	<div id="slides">
 		<iframe src="https://docs.google.com/present/view?id=0AX5OB7HMRFTQZDR3czVwal8yMjdmdG0zOTljOQ"
 			width="100%" 
	 	    	height="100%" 
	 	    	scrolling="auto" 
	 	    	frameborder="0" 
	 	    	id="viewer" />
 	 </div>		    	
 </body>

.
Là quand j'appuie sur les boutons, mon event est bien capturé (Je capture les evenement touche pressée uniquement pour les intercepter, pour mon vrai besoin il est inutile). Il me reste juste le problème d'envoyer l'event au bon endroit. J'ai essayé sur "frame" mais sans succès alors qu'en ayant mis le focus dessus, si j'appuie au clavier ça marche bien.

Turbulator · 22/12/2011, 10h55

Bon ben, je me répond à moi même.
La réponse est très simple : c'est pas possible.
En effet, JQuery ne permet pas de simuler complètement le clavier. Les triggers sont seulement destiné aux handler (comme keypress(...) ).
En revanche, les apis de Firefox permettent de s'en sortir avec du dispatchEvent. J'ai testé ça marche dans un text input même si j'arrive pas à le faire avaler avec mon iframe (mais ça c'est une autre histoire).

Bovino · 22/12/2011, 11h46

Citation:

j'arrive pas à le faire avaler avec mon iframe

Si ton but est de lancer des événements dans une iframe, tu peux oublier tout de suite !
Renseigne-toi sur la Same Origin Policy.

16/12/2011, 14h00	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Il me semble que la propriété which est readonly... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

22/12/2011, 10h55	#4
Turbulator Invité de passage Inscription : janvier 2007 Messages : 12 Détails du profil Informations forums : Inscription : janvier 2007 Messages : 12 Points : 3 Points : 3	Bon ben, je me répond à moi même. La réponse est très simple : c'est pas possible. En effet, JQuery ne permet pas de simuler complètement le clavier. Les triggers sont seulement destiné aux handler (comme keypress(...) ). En revanche, les apis de Firefox permettent de s'en sortir avec du dispatchEvent. J'ai testé ça marche dans un text input même si j'arrive pas à le faire avaler avec mon iframe (mais ça c'est une autre histoire).
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email