2008-08-06 7 views
74

Ich möchte in der Lage sein, den Tab Schlüssel in einem Textfeld zu verwenden, um über vier Leerzeichen zu überlappen. Wie es jetzt ist, springt die Tab-Taste meinen Cursor zum nächsten Eingang.Capturing TAB-Taste in Textfeld

Gibt es JavaScript, das die Tabulator-Taste im Textfeld erfasst, bevor es in die Benutzeroberfläche übergeht?

Ich verstehe, dass einige Browser (z. B. FireFox) dies möglicherweise nicht zulassen. Wie wäre es eine benutzerdefinierte Tastenkombination wie Umschalt +Tab oder Ctrl +Q?

+0

Dieser Beitrag wurde Moderator-Flag als "gehört auf meta.stackoverflow.com," aber es ist über zwei Jahre alt, so dass ich es nicht migrieren. –

+0

Vergessen Sie nicht, nach dem fokussierten Fenster zu suchen, und lassen Sie es normal platzen, wenn Sie nicht im Editor-Textbereich sind. – FlySwat

Antwort

83

Auch wenn Sie das Ereignis "keydown/keyup" erfassen, sind dies die einzigen Ereignisse, die mit der Tabulatortaste ausgelöst werden. Sie müssen jedoch weiterhin verhindern, dass die Standardaktion zum nächsten Element in der Aktivierreihenfolge übergeht.

In Firefox können Sie die preventDefault() Methode für das Ereignisobjekt aufrufen, das an Ihren Event-Handler übergeben wird. In IE müssen Sie false aus dem Ereignishandle zurückgeben. Die JQuery-Bibliothek bietet eine preventDefault-Methode für ihr 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> 
+1

Ich habe gerade Zeile 4 korrigiert, von "if (el.attachEvent)" zu "if (myInput.attachEvent)" – Fenton

+0

Beachten Sie, dass dieser Code TAB nur am Ende hinzufügt. Es ist in den meisten Fällen unbequem. –

+0

@SteveFenton Gibt es eine einfache Möglichkeit, die Leerzeichen mit 'keycode'' 8' wieder zu entfernen? – yckart

9

Die vorherige Antwort ist in Ordnung, aber ich bin einer von denen, die sich entschieden gegen das Verhalten mit der Präsentation (setzen von JavaScript in meinem HTML), also lieber meine Event-Handling-Logik in meine JavaScript-Dateien. Darüber hinaus implementieren nicht alle Browser das Ereignis (oder e) auf die gleiche Weise. Sie können einen Scheck vor der Ausführung jeder Logik zu tun:

document.onkeydown = TabExample; 

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

Ich möchte lieber nicht Tab Eindringarbeit als Elemente der Tabulatortaste zwischen Form zu brechen.

Wenn Sie in Code in der Markdown-Box setzen einrücken, verwenden Ctrl +K (oder ⌘K auf einem Mac).

Um die Aktion tatsächlich zu stoppen, stoppt jQuery (das Stack Overflow verwendet) das Bubbling eines Ereignisses, wenn Sie false von einem Ereignisrückruf zurückgeben. Dies erleichtert das Arbeiten mit mehreren Browsern.

4

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 in das nächste Feld eines Formulars verschieben, werde ich sehr verärgert sein.

Ein Shortcut-Schlüssel könnte jedoch nützlich sein, insbesondere bei großen Codeblöcken und Verschachtelungen. Umschalt-TAB ist eine schlechte Option, da das normalerweise zu dem vorherigen Feld in einem Formular führt. Vielleicht wäre eine neue Schaltfläche im WMD-Editor zum Einfügen eines Code-TAB mit einem Shortcut-Key möglich?

+0

Die Frage ist völlig anwendungsabhängig. Ich arbeite an einem Code-Editor-Steuerelement. Ich habe keinen Tabschlüssel angegeben und alle meine Schüler haben sich beschwert. Ich tat es nicht, weil ich die Zugänglichkeit für meinen einen blinden Schüler nicht unterbrechen wollte. Ich habe jetzt die Tab-Unterstützung hinzugefügt, habe aber auch eine Benutzer-Voreinstellung zur Verfügung gestellt, um sie auszuschalten. – Charles

+0

@Charles sehr guter Punkt über die Zugänglichkeit Auswirkungen. –

1

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

Hier ist eins:. Kleines!in beste Antwort

3

es ein Problem von ScottKoon

hier ist es funktioniert Durch sein sollte

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

dies gegeben ist nicht in IE

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

. In der Hoffnung, dass ScottKoon wird Code