Discussion :

[michaeljeru]

Bonjour,
Je travaille sur une application Java Web avec Struts.
J'ai une page qui contient 3 onglets disposés dans un layout. Sur un de ces pages, j'ai un champ texte, sur lequel je veux programmer une action spécifique de la touche Entrée via le event.keycode. J'ai écrit une petite fonction pour intercepter l'évènement "Touche entrée pressée" et effectuer mon traitement spécifique, tout va bien à ce niveau là.
Mon problème, c'est que lorsque je presse la touche entrée, je rentre bien dans ma fonction (en témoigne un alert placé au début de celle ci), mais je suis aussitôt redirigé vers l'action struts de mon form...

Comment pourrais-je désactiver la validation du formulaire sur la touche Entrée?

Voici le code de ma fonction JS :

Code :

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

1
2
3
4
5
6
7
8
 
function keypress(evenement) {
    alert(evenement.keyCode);
    if(evenement.keyCode == 13) {
        alert("TOUCHE ENTER");
        //traitement spécifique
    }
}

ainsi que le code de ma JSP :

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
 
...
 
<nested:form action="/MAJ_Page.do">
 
	<layout:tabs width="98%" selectedTabKeyName="tab">   
		<layout:tab bundle="bundle" key="onglet1" href="javascript:goTo('/Page.do?tab=onglet1', '_self');">
			<%@ include file="/jsp/jsp_onglet1.jsp"%>
		</layout:tab>   
 
		<layout:tab bundle="bundle" key="onglet2" href="javascript:goTo('/Page.do?tab=onglet2', '_self');">   
			<%@ include file="/jsp/jsp_onglet2.jsp"%>
		</layout:tab>
 
		<layout:tab bundle="bundle" key="onglet3" href="javascript:goTo('/Page.do?tab=onglet3', '_self');">   
			<%@ include file="/jsp/jsp_onglet3.jsp"%>
		</layout:tab>
 
		<br/>
 
		<table width="100%" border="0">
			<tr align="center">
				<td align="center">
					<html:button property="_valider" onclick="javascript:validFormulaire('/MAJ_Page.do', '_self');">
						<bean:message key="btn_valider" bundle="boutons"/>
					</html:button>
				</td>
 
				<td align="center">
					<html:button property="_annuler" onclick="goTo('/Menu.do');">
						<bean:message key="btn_annuler" bundle="boutons"/>
					</html:button>
				</td>
			</tr>
		</table>
	</layout:tabs> 
</nested:form>
 
...

Merci d'avance pour votre aide

PS : J'ai même retiré carrément le bouton Valider de la page, la touche Entrée provoque quand même la validation du formulaire, donc c'est bien l'action du form qui est appelée

[Boojum]

La touche entrée valide le formulaire où se trouve le champ qui a le focus, bouton de soumission ou non. Pour éviter ça, il faut que l'évènement onkeypress renvoie false. Par exemple :

Code :

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

1
2
3
4
5
6
function keypress(evenement) {
    alert(evenement.keyCode);
    if(evenement.keyCode == 13) {
        return false;
    }
}

Et sur ton formulaire :

Code :

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

<nested:form action="/MAJ_Page.do" onkeypress="return keypress(event)">

C'est du pur HTML/Javascript, rien à voir avec Struts. Il faudrait peut-être déplacer le sujet vers le forum adapté ?

[michaeljeru]

le problème boojum, c'est que onkeypress n'est pas un évènement géré par le nested:form (Message d'erreur : "undefined attribute name onkeypress"), les seuls évènements proposés sont onReset et onSubmit...

[Boojum]

J'avais pas noté, j'avoue... Pratique

Tu peux toujours le mettre individuellement sur tous les champs de ton formulaire, mais ça risque de devenir lourd selon le nombre que tu en as.

Probablement mieux à long terme : tu fais un petit script JS à la fin de ta page pour récupérer l'élément HTML form et valoriser le onkeypress depuis le script. L'évènement existe bien sur la balise form, c'est juste Struts qui ne le gère pas...

[michaeljeru]

Probablement mieux à long terme : tu fais un petit script JS à la fin de ta page pour récupérer l'élément HTML form et valoriser le onkeypress depuis le script.

Je t'avoue que là, c'est du chinois pour moi.

[Boojum]

Désolé, j'ai été un peu vite.

Ton <nested:form> dans ta JSP génère une balise <form> dans le HTML. Or, l'attribut onkeypress existe bien sur la balise <form>, c'est juste Struts qui ne le rend pas disponible sur <nested:form>.

Pour le mettre en place, il va donc falloir l'ajouter en Javascript (JS) sur la balise <form> (puisque tu ne peux pas y accéder directement).

Code :

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

1
2
3
4
document.getElementById("identifiant.de.ton.form").onkeypress = function(evenement) {
    //renvoie true pour toute autre touche que Enter
    return (evenement.keyCode != 13);
}

Le code doit se trouver en fin de page (après ta balise <form>) pour qu'il puisse la trouver.

[michaeljeru]

ça marche !

Effectivement, je me demandais bien ce qu'allait pouvoir faire l'ajout d'un <script></script> en bas de jsp, mais ça marche ! La touche Entrée est bloquée pour la validation du formulaire, et mon champ texte avec le onkeypress catche la touche Entrée pour l'action désirée.
Merci bcp boojum pour ton aide.