Touche Entrée exécute le onLoad

Version imprimable

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:

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 !

30/10/2010, 13h56
RomainVALERI

Citation:

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 :ccool:), c'est là que ça se passe ;)

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

Code:

return false;

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

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:

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.

30/10/2010, 16h53
RomainVALERI

Citation:

Envoyé par Melooo

me semble

Montre nous un peu cette fonction rechercher() 8-)

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:

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... ;)

03/11/2010, 11h05
Melooo

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