Touche Entrée exécute le onLoad

**Melooo** · 29/10/2010, 19h26

Bonsoir à tous.

Je suis depuis ce midi sur un TP DOM qui est quasiment terminé.
Je rencontre un problème bien gênant cependant.

La page contient un formulaire de recherche qui tire les résultats d'un fichier XML. Pour en venir au fait, lorsque j'appuie sur la touche Entrée, la page se recharge / le onLoad est de nouveau exécuté.
J'ai essayé de mettre un eventCatcher sur la touche Entrée, celui-ci fonctionne bien puisqu'il valide la recherche, mais la page est également rechargée !

Voici les morceaux intéressants

Code :

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

1
2
3
4
5
6
7
 
<BODY onLoad="mouvement(0); loadXML();" style="background-color:#DDDDDD;">
		<XML ID="feuilleDom" SRC="inventaire.xml"></XML>
		<div id="bandereau"></div>
		<form name="formulaire"><br/>
		Recherche sur le terme :	<input type='text' id="champ"/>
                </form>

Je ne sais pas s'il y a besoin de plus, mais de prime abord je ne vois vraiment pas quoi d'autre dans mon code pourrait influencer ça.

Merci pour toute piste !

**RomainVALERI** · 30/10/2010, 13h56

Envoyé par Melooo

Je ne sais pas s'il y a besoin de plus, mais de prime abord je ne vois vraiment pas quoi d'autre dans mon code pourrait influencer ça.

Merci pour toute piste !

Le formulaire n'a pas de propriete action ni l'input de propriete onclick ?

Si c'est un JS externe qui applique les gestionnaires d'événement à tes éléments (bonne pratique, ça

), c'est là que ça se passe

Montre-nous le reste de ton JS, car il va falloir placer un

Code javascript :

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

return false;

à la fin du gestionnaire d'événement concerné.

**Melooo** · 30/10/2010, 15h57

Sisisi j'ai un onClick biensûr, qui récupère le contenu de "champ". Le click sur le bouton submit fonctionne très bien, c'est juste la touche entrée !

Le gestionnaire d'évènements que j'utilise, je l'ai tiré de ce que j'ai trouvé rapidement sur le net :

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
 
document.onkeyup = KeyCheck;
 
function KeyCheck(e)
 
			{
			   var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
			   switch(KeyID)
			   {
				  case 13:
				  rechercher(champ.value);
				  break;
			   }
 
			}

Il fonctionne bien dans le sens où l'appui sur la touche Entrée me semble correctement lancer la recherche, mais j'ai toujours un rechargement de la page / onLoad.

**RomainVALERI** · 30/10/2010, 16h53

Envoyé par Melooo

me semble

Montre nous un peu cette fonction rechercher()

**Bovino** · 30/10/2010, 20h10

Lorsque tu es dans un champ de formulaire, l'action par défaut de la touche entrée est de soumettre le formulaire.
Donc il faut annihiler cette action par défaut. Pour cela, tu peux utiliser la propriété cancelBubble / la méthode stopPropagation() de l'objet event.
Au pire, retourner un équivalent de false à la fonction anonyme appelée par le gestionnaire d'événement :

Code :

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

1
2
3
4
5
6
7
8
9
document.onkeyup = function(){return KeyCheck();}
function KeyCheck(e){
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    switch(KeyID){
        case 13:
            rechercher(champ.value);
            return false;
    }
}

PS : T'as vu, en évitant les indentations excessives, le code est plus facilement lisible...

**Melooo** · 03/11/2010, 11h05

Merci bien, je vais me renseigner sur ça tout de suite

Touche Entrée exécute le onLoad

JavaScript

Discussions similaires

Partager

Partager