Capture de la touche TAB dans la zone de texte [fermé]

StackOverflow https://stackoverflow.com/questions/3362

  •  08-06-2019
  •  | 
  •  

Question

J'aimerais pouvoir utiliser le Languette touchez dans une zone de texte pour passer sur quatre espaces.Dans l’état actuel des choses, la touche Tab fait passer mon curseur à l’entrée suivante.

Existe-t-il du JavaScript qui capturera la touche Tab dans la zone de texte avant qu'elle n'apparaisse dans l'interface utilisateur ?

Je comprends certains navigateurs (par ex.FireFox) peut ne pas autoriser cela.Que diriez-vous d'une combinaison de touches personnalisée comme Changement+Languette, ou Ctrl+Q?

Était-ce utile?

La solution

Même si vous capturez le keydown/keyup événement, ce sont les seuls événements déclenchés par la touche de tabulation, vous avez toujours besoin d'un moyen pour empêcher l'action par défaut, passer à l'élément suivant dans l'ordre de tabulation, de se produire.

Dans Firefox, vous pouvez appeler le preventDefault() méthode sur l’objet événement transmis à votre gestionnaire d’événements.Dans IE, vous devez renvoyer false à partir du handle d’événement.La bibliothèque JQuery fournit un preventDefault méthode sur son objet événement qui fonctionne dans IE et FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

Autres conseils

Je préfère que l'indentation des tabulations ne fonctionne pas plutôt que de rompre la tabulation entre les éléments du formulaire.

Si vous souhaitez mettre en retrait pour mettre du code dans la zone Markdown, utilisez Ctrl+K (ou ⌘K sur un Mac).

En termes d'arrêt réel de l'action, jQuery (que Stack Overflow utilise) empêchera un événement de bouillonner lorsque vous renvoyez false à partir d'un rappel d'événement.Cela facilite la vie lorsque vous travaillez avec plusieurs navigateurs.

La réponse précédente est bonne, mais je fais partie de ces gars qui s'opposent fermement au mélange du comportement et de la présentation (en mettant du JavaScript dans mon HTML), je préfère donc mettre ma logique de gestion des événements dans mes fichiers JavaScript.De plus, tous les navigateurs n'implémentent pas event (ou e) de la même manière.Vous souhaiterez peut-être effectuer une vérification avant d'exécuter une logique :

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

Je déconseille de modifier le comportement par défaut d'une clé.Je fais autant que possible sans toucher une souris, donc si vous empêchez ma touche de tabulation de passer au champ suivant sur un formulaire, je serai très agacé.

Une touche de raccourci pourrait cependant être utile, notamment avec de gros blocs de code et des imbrications.Shift-TAB est une mauvaise option car cela m'amène normalement au champ précédent d'un formulaire.Peut-être qu'un nouveau bouton sur l'éditeur WMD pour insérer un code-TAB, avec une touche de raccourci, serait possible ?

il y a un problème dans la meilleure réponse donnée par ScottKoon

voilà

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Devrait être 

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Pour cette raison, cela n’a pas fonctionné dans IE.En espérant que ScottKoon mettra à jour le code

Dans Chrome sur Mac, alt-tab insère un caractère de tabulation dans un <textarea> champ.

En voici un :.Pipi!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top