javascript - Erfassen der TAB-Taste im Textfeld

Translate

Ich möchte das nutzen könnenTabGeben Sie in ein Textfeld ein, 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 wieVerschiebung+Tab, oderStrg+Q?

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

Alle Antworten

Translate

Auch wenn Sie die erfassenkeydown/keyupWenn dies die einzigen Ereignisse sind, die mit der Tabulatortaste ausgelöst werden, müssen Sie noch verhindern, dass die Standardaktion zum nächsten Element in der Tabulatorreihenfolge wechselt.

In Firefox können Sie die aufrufenpreventDefault()Methode für das an Ihren Ereignishandler übergebene Ereignisobjekt. Im IE müssen Sie false vom Ereignishandle zurückgeben. Die JQuery-Bibliothek bietet apreventDefaultMethode für das Ereignisobjekt, das 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>
Quelle
Translate

Ich möchte lieber, dass die Einrückung von Registerkarten nicht funktioniert, als das Tabbing zwischen Formularelementen zu unterbrechen.

Wenn Sie einrücken möchten, um Code in das Feld Markdown einzufügen, verwenden SieStrg+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.

Quelle
Tom
Translate

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
  }
}
Quelle
Translate

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 hilfreich 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?

Quelle
Translate

Die beste Antwort von ScottKoon gibt ein Problem

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

Quelle
Translate

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

Hier ist eins: . Wee!

Quelle