11548 sujets

JavaScript, DOM et API Web HTML5

Envoyer formulaire fléches clavier

Bonjour,

Je cherche à pouvoir faire défiler des images grâce aux flèches du clavier.
Par exemple pour le bouton suivant :
<input type="submit" name="suiv" />
J'aimerai ajouter la possibilité de faire la flèche droite du clavier.
J'ai pour l'instant ce début de code :

<body onkeypress="if (event.keyCode == 39) alert('Alerte de test');">
   <balise>
     code...
   </balise>
   <form method="post" action="#">
     <input type="submit" name="suiv" />
     <img src="..." />
   </form>
</body>

J'ai 2 questions pour arriver à mes fins :
- Comment déclencher l'envoi du formulaire à distance ? (avec un id, comment ?)
- Est-il possible d'ajouter un paramètre à submit() du JS pour d'une manière ou d'une autre savoir que PHP doit afficher l'image suivante ? (car $_POST['suiv'] n'existera pas après l'envoi du formulaire grâce au JS du <body>)

Merci.
Modifié par KelT55 (04 Sep 2011 - 11:25)
Salut,

Si c'est juste pour le diaporama, pas besoin de formulaire.
L'idée est de détecter la touche pressée et, selon que c'est "flèche à gauche" ou "flèche à droite", de récupérer la valeur de l'attribut href de ton lien de navigation correspondant.
Imaginons que la flèche de gauche porte un id="prev" et celle de droite un id="next", avec un peu de jQuery, ça donnerait ceci :
$(function() {
	$(document).keypress(function(e) {
		var code = e.keyCode ? e.keyCode : e.which;
		if(code == 37)
		{
			window.location = $('#prev').attr('href');
		}
		else if (code == 39)
		{
			window.location = $('#next').attr('href');
		}
	});
});


tm
Salut,

Je suis aussi intéressé par le sujet (merci à tm(tm) de m'avoir renvoyé sur ce post !).

Ceci étant, je suis encore plus nul en jQuery qu'en javascript, donc ça me paraît un peu obscure...

Questions : où faut-il déclarer cette fonction? quand faut-il l'appeler?...

Merci pour ton aide !!
poldybloom a écrit :
où faut-il déclarer cette fonction? quand faut-il l'appeler?...

Tu charges d'abord jQuery (sur le web ou en local) et puis ensuite tu peux appeler l'ensemble.
Idéalement dans un fichier externe et plutôt avant la fin du body...

A ajouter en guise de commentaires... ^_-
- La première ligne attend que le DOM soit chargé.
- La seconde assigne un écouteur d'événement de clavier au document.
- Lorsque l'événement se produit, on récupère la touche pressée et on teste si c'est &#8592; ou &#8594;.
- Si c'est le cas, on redirige vers la valeur de l'attribut href du bouton de navigation...

JQuery présente quand même cet avantage d'être concis tout en étant cross-browser ! ^_^

tm
oh la la... je pige que dalle Smiley decu désolé, m'en veux pas, mais je vais opter pour l'option qui a été ébauchée au début de ce poste. Je vais coder en javascript directement dans la balise "body" :

<body onkeydown="if(event.keyCode==39){top.document.location='mapage_suivante.php';}">


Et je rajoute d'autres "if" pour les touches gauche, début, fin.
L'important, c'est que ça marche Smiley langue :
http://www.queseio.fr/diaporama.php?code=salinas_humahuaca&num=232

En tout cas, merci mille fois pour m'avoir orienté vers ce post ! Smiley smile
Super tm™ ! Merci bonne soirée.
Edit: Juste une petite question, y a-t-il une version de JQuery préconisé, la plus récente semble le mieux ?
Modifié par KelT55 (12 Sep 2011 - 22:43)
Sujet clos
Aller à