Pourquoi les formulaires avec un seul champ de saisie sont-ils soumis en appuyant sur la touche Entrée
Pourquoi est-ce qu'un <form> avec un seul <input> champ rechargera le formulaire lorsque l'utilisateur entre une valeur et appuie sur la touche Enter, et ce n'est pas le cas s'il y a 2 champs ou plus dans le <form> ?.
J'ai écrit un page simple pour tester cette bizarrerie.
Si vous saisissez une valeur dans le deuxième formulaire et appuyez sur Entrée, vous verrez qu'elle recharge la page en passant la valeur entrée comme si vous appeliez GET. Pourquoi? et comment l'éviter?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testFormEnter</title>
</head>
<body>
<form>
<input type="text" name="partid2" id="partid2" />
<input type="text" name="partdesc" id="partdesc" />
</form>
<p>2 field form works fine</p>
<form>
<input type="text" name="partid" id="partid" />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>
C'est un "Quirk" peu connu qui est sorti depuis un moment. Je sais que certaines personnes l'ont résolu de diverses manières.
Le contournement le plus simple à mon avis est simplement d'avoir une deuxième entrée qui n'est pas affichée pour l'utilisateur. Étant donné que tout n'est pas convivial sur le backend, cela fonctionne pour résoudre le problème.
Je dois noter que l'endroit le plus courant que j'entends parler de ce problème est avec IE spécifiquement et non avec FireFox ou autres. Bien que cela semble les affecter également.
Il s'agit d'un bogue connu dans IE6/7/8 . Il ne semble pas que vous obtiendrez un correctif.
La meilleure solution de contournement que vous pouvez faire pour cela est d'ajouter un autre champ masqué (si votre conscience technique le permet). IE ne soumettra plus automatiquement un formulaire lorsqu'il constate qu'il y a deux champs de type d'entrée dans le formulaire.
Mise à jour
Au cas où vous vous demanderiez pourquoi c'est le cas, ce bijou vient directement de la spécification HTML 2.0 (Section 8.2) :
Lorsqu'il n'y a qu'un seul champ de saisie de texte sur une seule ligne dans un formulaire, l'agent utilisateur doit accepter Entrée dans ce champ comme demande de soumission du formulaire.
Voici le code que j'ai utilisé pour résoudre le problème:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" />
</form>
Appuyer sur Entrée fonctionne différemment selon (a) le nombre de champs et (b) le nombre de boutons d'envoi. Il peut ne rien faire, il peut soumettre le formulaire sans bouton de soumission "réussi", ou il peut prétendre que le premier bouton de soumission a été cliqué (même en générant un onclick pour cela!) Et soumettre avec la valeur de ce bouton.
Par exemple, si vous ajoutez un input type="submit" à votre formulaire à deux champs, vous remarquerez qu'il est également soumis.
Il s'agit d'une ancienne bizarrerie du navigateur remontant au moins au début de Netscape (peut-être plus loin), qui ne changera probablement pas maintenant.
<form>
Invalide sans "action". Si vous n'avez pas l'intention de soumettre quelque part et que vous n'avez pas besoin de grouper les noms des boutons radio, vous pouvez simplement omettre complètement l'élément de formulaire.
Non, le comportement par défaut est qu'à l'entrée, la dernière entrée du formulaire est soumise. Si vous ne voulez pas soumettre du tout, vous pouvez ajouter:
<form onsubmit="return false;">
Ou dans votre entrée
<input ... onkeypress="return event.keyCode != 13;">
Bien sûr, il existe des solutions plus belles, mais elles sont plus simples sans bibliothèque ni cadre.
Il ne s'agit pas de recharger la page en tant que telle, mais de soumettre le formulaire.
Cependant, dans cet exemple, car vous n'avez aucun attribut d'action sur le formulaire qu'il se soumet, ce qui donne l'impression de recharger la page.
De plus, je ne peux pas reprocher le comportement que vous décrivez. Si je suis dans une entrée de texte dans un formulaire et que j'appuie sur Entrée, il soumet le formulaire, quel que soit l'emplacement du formulaire ou le nombre d'entrées.
Vous voudrez peut-être essayer cela un peu plus dans différents navigateurs.
comme l'a déjà dit vignet, cela est enraciné dans la spécification html 2.0:
voici comment éviter que cela ne se produise sans visser vos URL:
<form>
<input type="text" name="partid" id="partid" />
<input type="text" style="display: none;" />
</form>
La solution que j'ai trouvée pour tous les navigateurs que j'ai testés (IE, FF, Chrome, Safari, Opera) est que le premier élément d'entrée type=submit Du formulaire doit être visible et doit être le premier élément de la forme. J'ai pu utiliser le placement CSS pour déplacer le bouton d'envoi vers le bas de la page et cela n'a pas affecté les résultats!
<form id="form" action="/">
<input type="submit" value="ensures-the-enter-key-submits-the-form"
style="width:1px;height:1px;position:fixed;bottom:1px;"/>
<div id="header" class="header"></div>
<div id="feedbackMessages" class="feedbackPanel"></div>
...... lots of other input tags, etc...
</form>
Merci à tous ceux qui ont répondu. C'est une révélation qu'un formulaire avec un seul champ agit différemment d'un formulaire avec plusieurs champs.
Une autre façon de gérer cette soumission automatique consiste à coder une fonction de soumission qui renvoie false.
Dans mon cas, j'avais un bouton avec un événement onclick, j'ai donc déplacé l'appel de fonction avec le mot clé return ajouté à l'événement onsubmit. Si la fonction appelée retourne false, la soumission n'aura pas lieu.
<form onsubmit="return ajaxMagic()">
<input type="text" name="partid" id="partid" />
<input type="submit" value="Find Part" />
</form
function ajaxMagic() {
...
return (false);
}
Oui, formulaire avec un seul champ inputText fonctionnant différemment en HTML 4.
onSubmit return false ne fonctionne pas pour moi mais le bogue ci-dessous fonctionne correctement
<!--Fix IE6/7/8 and HTML 4 bug -->
<input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />
J'ai géré cela par le code suivant mais je ne sais pas si c'est une bonne approche. En recherchant des champs de saisie dans un formulaire donné et si son 1 empêche l'action par défaut.
if($j("form#your-form input[type='text']").length == 1) {
$j(this).bind("keypress", function(event) {
if(event.which == 13) {
event.preventDefault();
}
});
}
Ce problème se produit dans les deux IE et Chrome. Il ne se produit pas sur Firefox. Une solution simple serait d'ajouter l'attribut suivant à la balise de formulaire: onsubmit = "return false"
Cela suppose, bien entendu, que vous soumettez le formulaire à l'aide d'un objet XMLHttpRequest.