javascript - Capture de la touche TAB dans la zone de texte

Translate

Je souhaite pouvoir utiliser leLanguettetouchez dans une zone de texte pour tabuler 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 ne monte dans l'interface utilisateur?

Je comprends que certains navigateurs (par exemple FireFox) peuvent ne pas permettre cela. Que diriez-vous d'une combinaison de touches personnalisée commeDécalage+Languette, ouCtrl+Q?

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

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

Dans Firefox, vous pouvez appeler lepreventDefault()sur l'objet événement passé à votre gestionnaire d'événements. Dans IE, vous devez renvoyer false à partir du handle d'événement. La bibliothèque JQuery fournit unpreventDefaultmé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>
La source
Translate

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

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

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

La source
Tom
Translate

La réponse précédente est bonne, mais je suis l'un de ces gars qui est fermement contre le mélange de comportement et de présentation (mettre JavaScript dans mon HTML), donc je préfère mettre ma logique de gestion d'événements dans mes fichiers JavaScript. De plus, tous les navigateurs n'implémentent pas l'événement (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
  }
}
La source
Translate

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 ne déplacez pas ma touche de tabulation vers le champ suivant sur un formulaire, je serai très agacé.

Une touche de raccourci peut cependant être utile, en particulier avec des blocs de code volumineux et une imbrication. 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-il possible?

La source
Translate

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

le voici

} 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 ne fonctionnait pas dans IE. En espérant que ScottKoon mettra à jour le code

La source
Translate

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

En voici un:. Pipi!

La source