web-dev-qa-db-fra.com

Créer une clé Entrée sur un formulaire HTML au lieu d'activer le bouton

J'ai un formulaire HTML avec une seule entrée submit, mais aussi divers éléments button. Lorsque l'utilisateur appuie sur la touche "Entrée", je pense qu'il envoie le formulaire, mais à la place (dans Chrome 15 au moins)), je constate que le déclenchement du premier button (puisque cela se produit plus tôt dans le code HTML que l'entrée submit, je suppose).

Je sais qu'en général, vous ne pouvez pas forcer les navigateurs à privilégier une entrée submit particulière, mais je pensais vraiment qu'ils préfèreraient les entrées submit à celles de button. Y at-il un petit Tweak que je peux faire au HTML pour que cela fonctionne, ou vais-je devoir adopter une sorte d’approche Javascript?

Voici une maquette approximative du code HTML:

<form action="form.php" method="POST">
    <input type="text" name="field1"/>
    <button onclick="return myFunc1()">Button 1</button>
    <input type="submit" name="go" value="Submit"/>
</form>
jqueryhtmlforms
68
andygeers

Vous pouvez utiliser jQuery:

$(function() {
    $("form input").keypress(function (e) {
        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $('button[type=submit] .default').click();
            return false;
        } else {
            return true;
        }
    });
});
30
Ofir Farchy

Vous n'avez pas besoin de JavaScript pour choisir votre bouton d'envoi ou votre entrée par défaut. Vous avez juste besoin de le marquer avec type="submit", et les autres boutons les marquent avec type="button". Dans votre exemple:

<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
121
Jesús Carrera

Essayez ceci, si vous avez appuyé sur la touche Entrée, vous pouvez la capturer comme ceci, par exemple, j’ai développé une réponse l’autre jour le bouton html spécifie sélectionné , voyez si cela aide.

Spécifiez le nom du formulaire comme par exemple yourFormName alors vous devriez pouvoir soumettre le formulaire sans avoir le focus sur le formulaire.

document.onkeypress = keyPress;

function keyPress(e){
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if(key == 13 || key == 3){
   //  myFunc1();
   document.yourFormName.submit();
  }
}
4
david

Je viens de frapper un problème avec cela. Le mien était en train de changer le input en un button et j'avais un terminateur de balise /> Mal écrit:

Alors j'ai eu:

<button name="submit_login" type="submit" class="login" />Login</button>

Et venons de l'amender pour:

<button name="submit_login" type="submit" class="login">Login</button>

Maintenant, fonctionne comme un charme, toujours les petites choses ennuyeuses ... HTH

3
Mike Wells
$("form#submit input").on('keypress',function(event) {
  event.preventDefault();
  if (event.which === 13) {
    $('button.submit').trigger('click');
  }
});
2
samehanwar

Étant donné qu’il n’existe qu’un seul (ou potentiellement pas un seul) bouton de soumission, voici une solution basée sur jQuery qui fonctionnera pour plusieurs formulaires sur la même page ...

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>
2
Darren

Je viens de faire un tourbillon dans les deux Chrome et Firefox et IE10.

Comme mentionné ci-dessus - assurez-vous que vous avez marqué avec type = "bouton", "réinitialiser", "soumettre" etc. pour vous assurer qu'il est correctement mis en cascade et qu'il sélectionne le bon bouton.

Peut-être aussi en les fixant tous à la même forme (c’est-à-dire tout ce qui a fonctionné pour moi)

1
Flanamacca