Raccourci clavier textarea pour valider

Résolu
schancel Messages postés 296 Date d'inscription   Statut Membre Dernière intervention   -  
avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

j'aimerai connaitre comment faire pour valider un texte du textarea via la touche Entrée

1 réponse

  1. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    Salut,

    La touche « Entrer » permet de faire un retour à la ligne dans les zones de texte multilignes (textarea).

    Si tu veux empêcher les retours à la ligne, tu peux utiliser un champ texte simple (input). Avec cette solution, la touche Entrer servira automatiquement à envoyer le formulaire.

    Tu peux également faire comme certaines applications de t'chat, telles que le Windows Live Messenger, c'est-à-dire envoyer le formulaire lorsqu'on presse Entrer mais autoriser les messages multilignes lorsque l'utilisateur presse Ctrl+Entrer.

    Ou pour éviter que tes utilisateurs n'envoient le message par accident en voulant faire un retour à la ligne, je te conseille d'utiliser le raccourci Ctrl+Entrer pour l'envoie du formulaire, et laisser la touche Entrer seule faire le retour à la ligne.

    Si tu choisi de garder une textarea, il faudra écouter l'évènement onkeydown sur cette textarea. Lorsqu'une touche sera relachée, tu pourras récupérer le code de la touche pressée (Entrer = 13) grâce à event.keyCode ; Il te sera également possible de savoir si la touche Ctrl était pressée avec event.ctrlKey.

    Exemple :
    <script type="text/javascript">
    window.onload = function() {
    
        /* <textarea id="comment_textarea" ...></textarea> */
        var textarea = document.getElementById('comment_textarea');
        
        textarea.onkeydown = function(e) {
            e = e || event; // cross-browser (quand IE en fait à sa tête)
            
            /* Envoyer le formulaire avec Ctrl+Entrer */
            if(e.keyCode == 13 && e.ctrlKey) {
                this.form.submit();
            }
            
            /* Envoyer le formulaire avec Entrer mais autoriser
             * les retours à la ligne avec Ctrl+Entrer */
            if(e.keyCode == 13 && !e.ctrlKey) {
                this.form.submit();
                return false;
            } else if (e.keyCode == 13) {
                this.value += "\n";
            }
        };
    };
    </script>
    1
    1. schancel Messages postés 296 Date d'inscription   Statut Membre Dernière intervention   49
       
      merci
      peut tu me dire a quoi sert le tabindex
      0
    2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
       
      L'attribut permet de définir l'ordre pour la navigation par tabulation.
      0