Popup calendrier indesirable sur [Entree] dans Firefox

Version imprimable

16/02/2007, 12h35
winterflood_j

Popup calendrier indesirable sur [Entree] dans Firefox

Bonjour,
Je travaille sur un site dans lequel on trouve un formulaire composé de quelques input (text, radio, liste deroulante...) ainsi que des boutons (soumission de la requete, reset du formulaire)
Ce formulaire comporte aussi deux popups de calendrier qui renseignent les input texte associés
les popups sont créés par du Javascript (que jen'ai pas fait moi-meme) et ne sont pas des fenetres a part, juste une zone dans la page

Le probleme qui se pose est le suivant:
Lors d'un appui sur [Entree] dans n'importe-quel input texte, le popup du premier des deux calendriers s'affiche, et ce, uniquement sous firefox (par opposition à IE6)
Y a t'il une maniere d'inhiber ce comportement?
A quoi pourrait-ce etre dû?
16/02/2007, 19h35
grimsk

montre nous le code qui fait afficher ton pop-up...

re.
En effet ça va surement aider (je m'attendais à ce que ce soit un comportement connu...) desolé

J'ai reussi à trouver d'où vient la difference de comportement: il s'agirait de la redirection par firefox de l'evenement [Entree] sur la text input sous la forme d'un MouseEvent sur le bouton en question:

Le code qui installe le popup est le suivant, dans lequel j'ai rajouté un hack-fix
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 # le bouton, la zone de texte entrée et sortie var triggerEl = params.button || params.displayArea || params.inputField; # params.eventName est "clic".... # installation du callback triggerEl["on" + params.eventName] = function(e) { #alert("event"); if (e) { #alert("has e "+e); if (e.originalTarget) { #alert("has e.originalTarget"); if ( e.currentTarget ) { #alert("has e.currentTarget"); if (e.originalTarget.id != e.currentTarget.id) { #alert("redirected event"); return false; } } } } #alert("direct event"); # a partir d'ici, pas trop d'interet ################################################### var dateEl = params.inputField || params.displayArea; var dateFmt = params.inputField ? params.ifFormat : params.daFormat; var mustCreate = false; if (!window.calendar) { window.calendar = new Calendar(params.mondayFirst, null, onSelect, function(cal) { cal.hide(); }); window.calendar.weekNumbers = params.weekNumbers; mustCreate = true; } else { window.calendar.hide(); } window.calendar.setRange(params.range[0], params.range[1]); window.calendar.params = params; window.calendar.setDisabledHandler(params.disableFunc); window.calendar.setDateFormat(dateFmt); if (mustCreate) { window.calendar.create(); } window.calendar.parseDate(dateEl.value || dateEl.innerHTML); window.calendar.refresh(); window.calendar.showAtElement(params.displayArea || params.inputField, params.align); return false; };
dans le cas IE, [Entree] sur la zone texte ne fait rien, mais dans le cas FFox, le callback onclick du bouton est appelé, avec comme originalTarget la zone texte, et comme currentTarget le bouton.
mon fix (un peu bourrin je l'admets) consiste a voir si l'evenement a été redirigé (et ne marche que sous firefox, vu que IE utilise window.event, avec des champs differents, mais comme le probleme ne se pose pas sous IE..)

Du coup, j'ai l'impression qu'il faudrait plutot dire à la zone texte de supprimer son evenement

Jonathan

19/02/2007, 11h14
Romalafrite

si c'est en appuyant sur Entrée => ça fait valider le formulaire

La solution : onsubmit="return false;" ou <input type="submit" onclick="if(!conditionValidePourEnvoyerLeFormulaire) return false;" />
19/02/2007, 11h34
winterflood_j

Eh bien justement, valider le formulaire par Entree est le comportement que j'attends, mais au lieu de cela, firefox commence par envoyer l'evenement à un bouton du formulaire (meme pas un bouton submit....)

Mon fix consiste à tester si l'evenement a ete redirigé ou non, et dans ce cas, inactiver le callback (à quel moment Firefox appelle les autres callbacks, et donc la validation du formulaire)
19/02/2007, 11h37
Romalafrite

montre le formulaire, parce que ça me semble improbable que firefox activite un bouton quelconque par la touche entrée sans y être invité..

Improbable, oui, je suis d'accord

A moi aussi ça me semble louche :D , c'est pour ça que je continue à chercher s'il y a pas mieux comme methode (par exemple: j'aurais fait une connerie :roll: )

J'ai reduit la page de maniere a la rendre lisible, mais voici un zip de la page, les 3 fichiers .js (le calendrier, la localisation.fr, et le setup(fichier modifié) ainsi qu'un css pour le style du calendrier

http://demo21.ovh.com/48cb01b8b1ff10...ceca91346d9eP/

remarquer que l'utililsation de la zone texte en dessous des calendriers active aussi le premier bouton...

le html seul:

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
 
<html>
	<head>
		<!-- <script type="text/javascript" src="recherche_simple_fichiers/functions.js"></script> -->
		<script type="text/javascript" src="recherche_simple_fichiers/calendar.js"></script>
		<script type="text/javascript" src="recherche_simple_fichiers/calendar-fr.js"></script> 
		<script type="text/javascript" src="recherche_simple_fichiers/calendar-setup.js"></script> 
		<link rel="stylesheet" type="text/css" media="all" href="recherche_simple_fichiers/calendar-blue.css">
 
	</head>
 
	<body onload="setFocus();" class="colorFondPage">
		<h1>Recherche simple</h1><br> 
		<form name="recherche" method="post" action="recherche_simple_action">
			Mots du titre:<input name="SearchableText" class="text" size="80" type="text"> <br><br><br><br><br><br><br><br>
			Date de signature:<input size="11" maxlength="22" name="dateSignatureMin" id="dateSignatureMin" type="text">
			<button id="trigger_dateSignatureMin" onclick="">...</button> <br><br><br><br>
 
			à :<input size="11" maxlength="22" name="dateSignatureMax" id="dateSignatureMin" type="text">
			<button id="trigger_dateSignatureMax" onclick="">...</button> <br><br><br><br>
			<button type="submit" class="standalone" onclick="recherche.submit();return true;">Lancer la recherche</button>
		</form>
 
		<script type="text/javascript">
			Calendar.setup(
				{
				inputField  : 'dateSignatureMax',
				ifFormat    : 'd/m/y',
				button      : 'trigger_dateSignatureMax',
				mondayFirst : true,
				range       : [1940, 2040]
				}
			);
		</script>
		<script type="text/javascript">
			Calendar.setup(
				{
				inputField  : 'dateSignatureMin',
				ifFormat    : 'd/m/y',
				button      : 'trigger_dateSignatureMin',
				mondayFirst : true,
				range       : [1940, 2040]
				}
			);
		</script>
 
	</body>
</html>

Jonathan