web-dev-qa-db-fra.com

Comment soumettre un formulaire sur enter lorsque la zone de texte a le focus?

Lorsque vous remplissez la zone de texte d'un formulaire, le comportement par défaut lorsque vous appuyez sur la touche Entrée est de passer à la ligne suivante. Comment puis-je modifier le comportement du formulaire afin qu'il soit soumis lorsque l'utilisateur clique sur Entrée, même lorsque l'utilisateur se trouve dans une zone de texte?

J'ai utilisé Firebug pour extraire le commentaire textarea de Stack Overflow (qui a ce comportement), mais je ne pouvais voir aucun code JavaScript ayant eu cet effet. Existe-t-il un moyen de changer le comportement de la zone de texte sans utiliser JavaScript?

htmlforms
49
andrew

Vous ne pouvez pas faire cela sans JavaScript. Stackoverflow utilise la bibliothèque JavaScript jQuery qui associe des fonctions aux éléments HTML lors du chargement de la page.

Voici comment vous pouvez le faire avec JavaScript JavaScript:

<textarea onkeydown="if (event.keyCode == 13) { this.form.submit(); return false; }"></textarea>

Le code clé 13 est la touche entrée.

Voici comment vous pouvez le faire avec jQuery comme le fait Stackoverflow:

<textarea class="commentarea"></textarea>

avec

$(document).ready(function() {
    $('.commentarea').keydown(function(event) {
        if (event.which == 13) {
            this.form.submit();
            event.preventDefault();
         }
    });
});
104
BalusC
<form id="myform">
    <input type="textbox" id="field"/>
    <input type="button" value="submit">
</form>

<script>
    $(function () {
        $("#field").keyup(function (event) {
            if (event.which === 13) {
                document.myform.submit();
            }
        }
    });
</script>
6
Eric Fortis

Pourquoi voulez-vous qu'une textarea soit soumise lorsque vous appuyez sur Entrée?

Une entrée "texte" sera soumise par défaut lorsque vous appuierez sur Entrée. C'est une entrée d'une seule ligne.

<input type="text" value="...">

Une "zone de texte" ne le sera pas, car elle bénéficie de capacités multilignes. Envoi en entrée supprime une partie de cet avantage.

<textarea name="area"></textarea>

Vous pouvez ajouter du code JavaScript pour détecter l'entrée au clavier et la soumission automatique, mais il est peut-être préférable d'utiliser une entrée de texte.

6
jthompson