HTML5: Comment faire de la soumission d'un formulaire, après avoir appuyé sur ENTRÉE, à l'une des entrées de texte?

Le titre parle de lui-même... j'ai un couple de formes, l'un d'eux est un simple formulaire de saisie de texte et l'autre est constituée par le texte de deux entrées. Je ne veux pas de bouton soumettre dans l'un d'eux, je veux que chaque forme de soumettre à chaque fois que l'utilisateur appuie sur le bouton ENTRER à toute saisie de texte:

  1. Le formulaire composé par une entrée soumet à chaque fois que l'utilisateur appuie sur le bouton ENTER - Parfait!
  2. La deuxième forme composée par le texte de deux entrées ne pas se comporter de cette façon, il ne se soumet pas lorsque l'utilisateur appuie sur la touche ENTER à l'une des deux entrées.

Est-il un moyen de faire un formulaire avec plus d'un texte d'entrée se comporter de cette façon et éviter d'avoir un bouton soumettre - t-il?

InformationsquelleAutor charliebrownie | 2015-01-06
  1. 43

    Essayez d'ajouter ce entre la <form></form> tags

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

    Testé et il fonctionne sur Firefox et Chrome. Si vous avez un envoyer le type de saisie dans le formulaire, entrée doit soumettre automatiquement, indépendamment de savoir si elle est visible ou non.

    J'utilise moi-même dans un formulaire de connexion, si dans le champ nom d'utilisateur, il est plus logique de passer à la zone suivante, que de se soumettre. Juste au cas où vous avez un semblable cas d'utilisation, 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();
    }
});

    Remarque qu'il y a un léger bug si -- si l'utilisateur sélectionne un navigateur de saisie semi-automatique nom d'utilisateur et presses entrée, il se déplace encore à la zone suivante, au lieu de le sélectionner. N'avait pas le temps de débogage, mais si quelqu'un peut comprendre comment résoudre le problème, ça serait cool.

    • Neat, faites-vous quelque chose de similaire avec les "#mot de passe' entrée? Juste de la curiosité! Le masquage de la soumettre des commentaires a bien fonctionné, j'ai juste besoin de quelque chose de simple à faire!
    • J'ai un visible bouton de soumission du formulaire et le #password champ, ne nécessite pas de code JS en appuyant sur entrer automatiquement soumet le formulaire comme prévu. Heureux que ça m'a aidé 🙂
    • Et je suppose que si votre #username champ est vide, mais votre #password n'est pas le cas et que le formulaire est soumis, vous allez gérer ça, hein? 🙂 Merci, en effet ça a aidé!
    InformationsquelleAutor user193130
  2. 2

    Vous aurez à chercher la touche Entrée appuyez sur. Ce post montre ici comment faire.
    Entrez la clé de la conférence de presse en JavaScript

    InformationsquelleAutor Jeremiah Jessel
  3. 2

    Être sûr que vos données sont à l'intérieur de "forme" et la donner à la "forme" élément, un attribut "action".

    • Je suis la capture de la forme de la soumission à l'aide de jQuery, à l'aide de $( formId ).on('submit', function (e) { ... }); qui fonctionne parfaitement pour le 1er cas (un formulaire de saisie de texte).
    InformationsquelleAutor Ahmadbaba46
  4. 2

    Je cherchais une solution à ce problème et que vous voulez faire partager ma solution, basée sur de nombreux postes ici. (Testé sur moderne Chrome/Firefox/IE)

    Donc, à l'aide de Javascript le code ci-dessous soumet le formulaire si la touche ENTRÉE est pressée sur tout champ ou si le bouton Submit est pressé. Après qu'il effacer/réinitialiser le formulaire, ce qui est une bonne chose à faire.

    Espère que cela 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>
    InformationsquelleAutor user3058813