Erfassen der TAB-Taste im Textfeld [geschlossen]

100

Ich möchte in der Lage sein, den TabSchlüssel in einem Textfeld zu verwenden, um über vier Leerzeichen zu tippen. So wie es jetzt ist, springt die Tabulatortaste mit dem Cursor zur nächsten Eingabe.

Gibt es JavaScript, das die Tabulatortaste im Textfeld erfasst, bevor sie in die Benutzeroberfläche gelangt?

Ich verstehe, dass einige Browser (z. B. FireFox) dies möglicherweise nicht zulassen. Wie wäre es mit einer benutzerdefinierten Tastenkombination wie Shift+ Taboder Ctrl+ Q?

javascript user-interface Seibar
quelle
Vergessen Sie nicht, nach dem fokussierten Fenster zu suchen und es normal aufblasen zu lassen, wenn Sie sich nicht im Textbereich des Editors befinden.
FlySwat
Dieser Beitrag wurde vom Moderator als "gehört auf meta.stackoverflow.com" gekennzeichnet, ist aber über zwei Jahre alt, daher migriere ich ihn nicht.
Robert Harvey

Antworten:

109

Selbst wenn Sie das Ereignis keydown/ erfassen keyup, sind dies die einzigen Ereignisse, die von der Tabulatortaste ausgelöst werden. Sie benötigen jedoch eine Möglichkeit, um zu verhindern, dass die Standardaktion zum nächsten Element in der Tabulatorreihenfolge wechselt.

In Firefox können Sie die preventDefault()Methode für das an Ihren Ereignishandler übergebene Ereignisobjekt aufrufen . Im IE müssen Sie false vom Ereignishandle zurückgeben. Die JQuery-Bibliothek bietet eine preventDefaultMethode für ihr Ereignisobjekt, die in IE und FF funktioniert.

<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
quelle
1
Ich habe gerade Zeile 4 von "if (el.attachEvent)" auf "if (myInput.attachEvent)" korrigiert
Fenton
Beachten Sie, dass dieser Code TAB erst am Ende hinzufügt. Es ist in den meisten Fällen unpraktisch.
Alexander Palamarchuk
@SteveFenton Gibt es eine einfache Möglichkeit, die Leerzeichen mit wieder zu entfernen keycode 8?
Yckart
18

Ich möchte lieber, dass Tabulatoreinrückungen nicht funktionieren, als das Tabbing zwischen Formularelementen zu unterbrechen.

Wenn Sie einrücken möchten, um Code in das Markdown-Feld einzugeben , verwenden Sie Ctrl+ K(oder ⌘K auf einem Mac).

Um die Aktion tatsächlich zu stoppen, verhindert jQuery (das von Stack Overflow verwendet wird), dass ein Ereignis sprudelt, wenn Sie von einem Ereignisrückruf false zurückgeben. Dies erleichtert das Arbeiten mit mehreren Browsern.

Lauren
quelle
13

Die vorherige Antwort ist in Ordnung, aber ich bin einer von denen, die entschieden dagegen sind, Verhalten mit Präsentation zu mischen (JavaScript in mein HTML einfügen), daher ziehe ich es vor, meine Ereignisbehandlungslogik in meine JavaScript-Dateien einzufügen. Darüber hinaus implementieren nicht alle Browser Ereignisse (oder e) auf dieselbe Weise. Möglicherweise möchten Sie eine Überprüfung durchführen, bevor Sie eine Logik ausführen:

document.onkeydown = TabExample;

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

Ich würde davon abraten, das Standardverhalten eines Schlüssels zu ändern. Ich mache so viel wie möglich, ohne eine Maus zu berühren. Wenn Sie also meine Tabulatortaste nicht zum nächsten Feld in einem Formular bewegen, bin ich sehr erschüttert.

Eine Tastenkombination kann jedoch nützlich sein, insbesondere bei großen Codeblöcken und Verschachtelung. Shift-TAB ist eine schlechte Option, da ich normalerweise zum vorherigen Feld in einem Formular komme. Vielleicht wäre eine neue Schaltfläche im WMD-Editor zum Einfügen eines Code-TAB mit einer Tastenkombination möglich?

Wally Lawless
quelle
1
Die Frage ist vollständig anwendungsabhängig. Ich arbeite an einem Code-Editor-Steuerelement. Ich habe keine Tabulatortaste angegeben und meine Schüler haben sich alle beschwert. Ich tat es nicht, weil ich die Zugänglichkeit für meinen einen blinden Schüler nicht unterbrechen wollte. Ich habe jetzt Tab-Unterstützung hinzugefügt, aber auch eine Benutzereinstellungsoption zum Deaktivieren bereitgestellt.
Charles
@ Charles sehr guter Punkt über die Auswirkungen auf die Barrierefreiheit.
Wally Lawless
4

Bei der besten Antwort von ScottKoon liegt ein Problem vor

hier ist es

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

Sollte sein 

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

Aus diesem Grund hat es im IE nicht funktioniert. Ich hoffe, dass ScottKoon den Code aktualisiert

chintan123
quelle
3

In Chrome auf dem Mac fügt Alt-Tab ein Tabulatorzeichen in ein <textarea>Feld ein.

Hier ist eine: . Wee!

Paul D. Waite
quelle