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

100

Je voudrais pouvoir utiliser la Tabclé 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 de remonter 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 comme Shift+ Tabou Ctrl+ Q?

javascript user-interface Seibar
la source
N'oubliez pas de vérifier la fenêtre focalisée et laissez-la bouillonner normalement si vous n'êtes pas dans la zone de texte de l'éditeur.
FlySwat
Ce message a été marqué par le modérateur comme "appartient à meta.stackoverflow.com", mais il a plus de deux ans, donc je ne le migre pas.
Robert Harvey

Réponses:

108

Même si vous capturez l' événement keydown/ keyup, ce sont les seuls événements déclenchés par la touche de tabulation, 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 la preventDefault()méthode sur l'objet événement passé à votre gestionnaire d'événements. Dans IE, vous devez retourner false à partir du handle d'événement. La bibliothèque JQuery fournit une preventDefaultmé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>
ScottKoon
la source
1
Je viens de corriger la ligne 4, de "if (el.attachEvent)" à "if (myInput.attachEvent)"
Fenton
Notez que ce code ajoute TAB uniquement à la fin. C'est peu pratique dans la plupart des cas.
Alexander Palamarchuk le
@SteveFenton Existe-t-il un moyen simple de supprimer à nouveau les espaces avec keycode 8?
yckart
18

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 mettre du code dans la zone Markdown, utilisez Ctrl+ K(ou ⌘K sur un Mac).

En termes d'arrêt 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.

Lauren
la source
13

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
  }
}
À M
la source
6

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 de gros blocs de code et l'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?

Wally Lawless
la source
1
La question dépend entièrement de l'application. Je travaille sur un contrôle d'éditeur de code. Je n'ai pas fourni de clé de tabulation et mes étudiants se sont tous plaints. Je ne l'ai pas fait parce que je ne voulais pas interrompre l'accessibilité pour mon élève aveugle. J'ai maintenant ajouté la prise en charge des onglets, mais j'ai également fourni une option de préférence utilisateur pour la désactiver.
Charles
@Charles très bon point sur les implications d'accessibilité.
Wally Lawless
4

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

c'est ici

} 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

chintan123
la source
3

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

En voici un:. Pipi!

Paul D. Waite
la source