bonjour

j'ai créé un site photo à partir de zenphoto
j'ai voulu mettre en place une navigation au clavier et j'ai recopié un script trouvé sur un autre thème que le mien.

problème :
la navigation au clavier est active uniquement sur la page des photos.
sur cette page, il y a une zone de commentaire et le script "capte" tous les événements clavier, même lorsqu'on est dans la zone commentaire.

du coup, si je me déplace dans mon commentaire avec les flêches, je change de photo, ce qui n'est évidement pas l'effet souhaité !

pourriez-vous m'aider à mettre en place la navigation au clavier, sachant que, si je suis dans la zone commentaire, cette navigation est neutralisée ?


le script

<script type="text/javascript">
<!--
<?php if (hasNextImage()) { ?>var nextURL="<?=getNextImageURL();?>";<?php } ?>
<?php if (hasPrevImage()) { ?>var prevURL="<?=getPrevImageURL();?>";<?php } ?>
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var ie = !opera && /msie [56789]/i.test(ua);
var moz = !opera && /mozilla\/[56789]/i.test(ua);
function keyDown(e){
	if (!ie) {var keyCode=e.which;}
	if (ie) {var keyCode=event.keyCode;}
	if(keyCode==39){<?php if (hasNextImage()) { ?>window.location=nextURL<?php } ?>};
	if(keyCode==37){<?php if (hasPrevImage()) { ?>window.location=prevURL<?php } ?>};
}
document.onkeydown = keyDown;
if (!ie)document.captureEvents(Event.KEYDOWN);
-->
</script>

mon site photo : http://vincent.bourganel.free.fr/zenphoto

Essaye de vérifier s'il y a le focus sur un élément de ton formulaire, et si tel est le cas tu empêche le changement de page.

(Tel qu'est ton code ça serait mieux de faire l'inverse, tu changes de page si il n'y a pas de focus sur un élement du formulaire.)

A noter qu'il n'y a pas de propriété toute prête pour savoir si un élément a le focus.

L'astuce est donc de modifier la valeur d'un booléen lors des événements onfocus() et onblur()

merci pour toutes vos réponses

je crois que la solution dépasse largement mes compétences js (en fait, je n'ai fait que copier/coller ce script dans mes pages.

quelles modifs de script me conseillez-vous de faire ?

Le copier-coller, on avait remarqué...

<script type="text/javascript">
<?php if (hasNextImage()) { ?>var nextURL="<?=getNextImageURL();?>";<?php } ?>
<?php if (hasPrevImage()) { ?>var prevURL="<?=getPrevImageURL();?>";<?php } ?>

var focusOnComment = false,
    f = document.getElementById('commentform'),
    inputName = f.elements.name,
    inputEmail = f.elements.email,
    inputWebsite = f.elements.website,
    inputComment = f.elements.comment;

inputName.onfocus = inputEmail.onfocus = inputWebsite.onfocus = inputComment.onfocus = function() {
  focusOnComment = true;
};
inputName.onblur = inputEmail.onblur = inputWebsite.onblur = inputComment.onblur = function() {
  focusOnComment = false;
};

function keyDown(e){
  if(focusOnComment) { return true; }
  e = e || window.event;
  var keyCode=e.keyCode;
	if(keyCode==39){<?php if (hasNextImage()) { ?>window.location=nextURL<?php } ?>};
	if(keyCode==37){<?php if (hasPrevImage()) { ?>window.location=prevURL<?php } ?>};
}
document.onkeydown = keyDown;
</script>

?

hello

Galmote, merci de ton aide !
j'ai recopié le js que tu m'as proposé, mais cela ne marche pas : je n'ai plus du tout de navigation au clavier sur la page des photos.


un exemple ici : http://vincent.bourganel.free.fr/zenphoto/index.php?album=raid-obivwak%2F20080512+Raid+Obivwak+2008&image=IMG_4034.jpg

Tu testes sous quel navigateur ? L'exemple que tu as mis en ligne fonctionne nickel sous Firefox...

hello

j'ai testé ton script sous IE8

le script que tu as pu voir sur mon site est différent : je l'ai trouvé sur un autre site de galerie photo.

il marche bien, bien que je comprenne rien du tout à son fonctionnement

<script type="text/javascript">
//<![CDATA[
	var nextURL="/zenphoto/index.php?album=raid-obivwak%2F20090530+Raid+Obivwak+2009&image=IMG_4672.jpg";		
	function keyboardNavigation(e){
		if(!e) e=window.event;
		if (e.altKey) return true;
		var target = e.target || e.srcElement;
		if (target && target.type) return true; //an input editable element
		var keyCode=e.keyCode || e.which;
		var docElem = document.documentElement;
		switch(keyCode) {
			case 63235: case 39:
				if (e.ctrlKey || docElem.scrollLeft==docElem.scrollWidth-docElem.clientWidth )
					{window.location=nextURL; return false; }
				break;
			case 63234: case 37:
				if (e.ctrlKey || docElem.scrollLeft==0){; return false; }
				break;
		}
		return true;
	}
	
	document.onkeydown=keyboardNavigation;
//]]>
</script>

en tout cas, merci de ton aide