Discussion :

[AchilleFraisse]

Bonjour,

J'ai un textarea (id = message), dans un formulaire (id = form).

Je veux envoyer le formulaire lorsque j'appuie sur la touche entré, et non allez à la ligne. Par contre, si le textarea ne contient rien (l'utilisateur n'a pas écrit de texte), il n'envoie rien.

J'ai fais ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var text = document.getElementById('message');
text.addEventListener('keydown', function(e) {
if(e.keyCode == 13 && text.value != '')
    $('#form').submit();
});

Donc lorsque j'appuie sur la touche entrée, ca envoie bien le texte, sauf qu'après, dans le textarea, j'ai la touche entré qui s'est marqué. Donc j'ai une nouvelle ligne après que le formulaire ait été envoyé.

[danielhagnoul]

Un formulaire ne doit être soumis que si l'utilisateur clique sur le bouton de soumission. Toute autre solution déroutera l'utilisateur.

[Watilin]

Daniel a raison, il n’est pas bon de détourner le comportement des éléments d’interface auxquels les utilisateurs sont habitués. C’est le principe de moindre surprise.

Les <textarea> sont prévus pour écrire du texte multiligne. Si tu ne veux pas permettre les sauts de ligne, utilise simplement un <input type="text">. Avec cet élément, l’appui sur entrée entraînera naturellement la soumission du formulaire.

Pour t’aider sur ton code si tu décides de ne pas tenir compte de nos recommandations (et c’est ton droit), voici quelques conseils :

Le comportement attendu d’un champ de texte, que ce soit <input> ou <textarea>, est, lorsque l’utilisateur frappe majuscule+entrée, de toujours saisir un saut de ligne, jamais envoyer le formulaire. Si tu veux que ton script respecte ça, tu dois aussi tester la valeur de e.shiftKey dans ta fonction.

Il y a deux sortes d’évènements clavier : ceux qui correspondent à une commande (touches ctrl, maj, les flèches, etc.), et ceux qui correspondent à un caractère. En gros,

• toutes les frappes au clavier envoient des keyup et keydown,
• mais seules celles qui entraînent la saisie d’un caractère génèrent des keypress.

La touche entrée est à cheval entre les deux mondes car elle correspond à la fois à une commande (« envoyer le formulaire ») et à un caractère (saut de ligne).

Si tu veux empêcher la soumission du formulaire, tu dois annuler l’évènement keyup ou keydown grâce à la méthode e.preventDefault().

En revanche, pour empêcher qu’un saut de ligne soit effectivement inséré avec la touche entrée, annule l’évènement keypress.