Die Erfassung TAB-Taste im Textfeld [geschlossen]

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

  •  08-06-2019
  •  | 
  •  

Frage

Ich möchte in der Lage sein zu verwenden Tab Taste in ein Textfeld, um eine Registerkarte über vier Räume.So, wie es jetzt die Tab-Taste springt mein cursor zum nächsten Eingang.

Gibt es eine JavaScript-erfassen Sie die Tab-Taste in das Textfeld ein, bevor Sie Blasen bis das UI?

Ich verstehe, dass einige Browser (z.B.FireFox) nicht zulassen.Wie wäre es mit einem custom key-combo, wie Shift+Tab, oder Strg+Q?

War es hilfreich?

Lösung

Selbst wenn Sie capture the keydown/keyup Ereignis, das sind nur einige der Ereignisse, die die tab-Taste feuert, Sie müssen noch einige Weg, um zu verhindern, dass die Standard-Aktion, bewegen zum nächsten Element in der tab-Reihenfolge auftreten.

In Firefox können Sie rufen Sie die preventDefault() Methode auf das event-Objekt, das an den Ereignishandler.In DH, Sie haben zu false aus der Ereignis-handle.Die JQuery-Bibliothek bietet eine preventDefault Methode auf seine event-Objekts, das funktioniert in IE und 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>

Andere Tipps

Ich würde lieber tab-Einrückung funktioniert nicht als Bruch tabbing zwischen Formular-Elemente.

Wenn Sie Einrücken möchten, um stellen im code im Markdown-box, zu verwenden Strg+K (oder ⌘K auf einem Mac).

In Bezug auf tatsächlich die Einstellung der Aktion, jQuery (die Stack-Überlauf) verwendet werden, stop-Ereignis sprudelt, wenn Sie false zurück von einem event callback.Das macht das Leben einfacher für die Arbeit mit mehreren Browsern.

Die Vorherige Antwort ist gut, aber ich bin einer von den Typen, die fest gegen die Vermischung Verhalten mit Präsentation (indem ich JavaScript in meinem HTML), daher bevorzuge ich es, meine event-handling-Logik in meinem JavaScript-Dateien.Darüber hinaus werden nicht alle Browser implementieren Ereignis (oder e) auf die gleiche Weise.Sie möchten möglicherweise überprüfen Sie vor der Ausführung jeglicher Logik:

document.onkeydown = TabExample;

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

Ich würde raten, gegen eine änderung der default-Verhalten des Schlüssels.Ich so viel wie möglich tun, ohne die Maus berühren, so dass, wenn Sie machen meine tab-Taste nicht bewegen, um zum nächsten Feld in einem Formular, ich werde mich sehr verschärft.

Eine shortcut-Taste nützlich sein könnte, jedoch vor allem mit großen code-Blöcke und verschachteln.Shift-TAB ist eine schlechte option, denn normalerweise bringt mich zum vorherigen Feld auf einem Formular.Vielleicht eine neue Schaltfläche auf der WMD-editor einen code einfügen-REGISTERKARTE, mit einer Tastenkombination möglich wäre?

es ist ein problem in der besten Antwort ScottKoon

hier ist es

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

Sollte 

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

Durch diese es nicht im IE funktioniert.In der Hoffnung, dass ScottKoon wird update-code

In Chrome auf dem Mac, alt + tab fügt einen Tabulator-Zeichen in einem <textarea> Feld.

Hier ist einer:.Wee!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top