web-dev-qa-db-fra.com

HTML5: Comment soumettre un formulaire après avoir appuyé sur ENTREE à l'une des entrées de texte?

Le titre parle de lui-même ... J'ai deux formulaires, l'un d'entre eux est un formulaire de saisie de texte unique et l'autre est composé de deux entrées de texte. Je ne veux pas de bouton de soumission , je veux que chaque formulaire soit soumis chaque fois que l'utilisateur appuie sur le bouton ENTRÉE lors de la saisie de texte:

  1. Le formulaire composé d'une seule entrée est soumis chaque fois que l'utilisateur appuie sur le bouton ENTRÉE - Perfect!
  2. Le second formulaire composé de deux entrées de texte ne se comporte pas de cette façon, il ne soumet pas lorsque l'utilisateur appuie sur le bouton ENTRÉE à l'une des deux entrées.

Existe-t-il un moyen de créer un formulaire avec plusieurs entrées de texte se comporte de cette manière et évite d’avoir un bouton de soumission ?

htmlhtml5formswebform-submit
35
charliebrownie

Essayez d'ajouter ceci entre le <form></form> Mots clés

<input type="submit" style="display: none" />

Testé et cela fonctionne sur Firefox et Chrome. Si vous avez un type d'entrée submit dans le formulaire, enter devrait automatiquement l'envoyer, qu'il soit visible ou non.

En fait, je l'utilise moi-même dans un formulaire de connexion, même si dans le champ nom d'utilisateur, il est plus logique de passer au champ suivant que de le soumettre. Juste au cas où vous avez un cas d'utilisation similaire, voici le code que j'ai utilisé (nécessite jQuery)

$('#username').keypress(function(event) {
    if (event.keyCode == 13 || event.which == 13) {
        $('#password').focus();
        event.preventDefault();
    }
});

Notez qu’il ya un léger bug cependant: si l’utilisateur sélectionne un nom d’utilisateur à complétion automatique et appuie sur enter, il passe toujours au champ suivant au lieu de le sélectionner. Je n'ai pas eu le temps de déboguer cela, mais si quelqu'un peut trouver une solution, ce serait cool.

41
user193130

Je cherchais une solution à ce problème et souhaitais partager ma solution à partir de nombreux articles publiés ici. (Testé sur Chrome/Firefox/IE moderne)

Donc, en utilisant uniquement Javascript, le code suivant envoie le formulaire si la touche Entrée est enfoncée n'importe lequel champ o si le bouton Submit est enfoncé. Après cela, effacez/réinitialisez le formulaire, ce qui est une bonne chose à faire.

J'espère que ça aide.

<!DOCTYPE html>
<html>
<body>
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<div onKeyPress="return myFunction(event)">
  <form id="form01" action="demo_form.asp" onsubmit="return false;" >
    Enter name: <input type="text" name="fname">
    <input type="button" value="Submit" onclick="myFunction(0)">
  </form>
</div>

<script>
function myFunction(e) {
   if((e && e.keyCode == 13) || e == 0) {
     alert("The form was submitted");
     document.forms.form01.submit();
     document.forms.form01.fname.value = ""; // could be form01.reset as well
   }
}
</script>

</body>
</html>
2
user3058813

Vous devrez chercher la touche Entrée. Cet article montre comment faire cela. Entrez l'événement de presse en JavaScript

2
Jeremiah Jessel

Assurez-vous que vos entrées sont dans l'élément "form" et attribuez à l'élément "form" un attribut "action".

2
Ahmadbaba46