it-swarm.com.de

Registerkarten in Textfeldern

Ich erstelle eine Website, auf der meine Benutzer häufig ihren Code eingeben müssen. Zusammen mit anderen Daten (Titel, Tags) gibt der Benutzer eine beliebige Codezeile bis zu einem gesamten Block mit bis zu 100 Codezeilen ein.

Der wirklich beschissene Teil beim Schreiben von Code in webbasierten Formularen besteht darin, dass der Cursor beim Versuch, Tabulatoreinrückungen vorzunehmen, zum nächsten Eingabefeld springt. Dies macht das Formatieren Ihres Codes in einen lesbaren Block nahezu unmöglich. Ich weiß, dass dies vermeidbar ist, wenn Sie einige ausgefallene Markup-Techniken verwenden, aber dann können Benutzer ihren Code nicht einfach kopieren und in meinen Textbereich einfügen.

Also habe ich ein Javascript geschrieben, das die Tastenanschläge des Benutzers verknüpft. Wenn es sich um eine Registerkarte handelt, wird verhindert, dass zur nächsten Eingabe übergegangen wird, und es wird ein Tabulatorzeichen eingegeben. Abgesehen von einem Fehler funktioniert es absolut perfekt. Wenn ich mich jetzt durch mein Eingabeformular bewege, erscheint es unnatürlich, da ich nicht zum nächsten Feld wechseln kann.

Hier ist ein Beispiel dafür, was genau passiert: http://jsfiddle.net/uu9ft/1

Natürlich kann ich nicht beides haben, also was ist besser? Tabulator für Einrückung im Code oder Tabulator, um zum nächsten Feld zu gelangen?

3
jwegner

Ich würde in Betracht ziehen, etwas zu tun, um das Codeeingabefeld so zu isolieren, dass ein Benutzer nicht durch das plötzliche "Entführen" der Tabulatortaste verwirrt wird, z. Lassen Sie das Codefeld bis zum Ende des Formulars und haben Sie eine Textzeile, die angibt, dass eingerückt wird, oder ein Kontrollkästchen, mit dem der Benutzer das JavaScript für die Erfassung im Codeeingabefeld nach Belieben aktivieren/deaktivieren kann.

Ich weiß zu schätzen, dass all dies mehr Arbeit für Sie bedeutet, aber ich mag die Idee nicht, das Verhalten eines häufig verwendeten Schlüssels im Zusammenhang mit der Navigation durch ein Formular zu ändern und sich nur darauf zu verlassen, dass der Benutzer es "erhält", weil dies möglich ist sei ein bisschen technisch.

4
Sam K

Steuerelemente, die die "Tab" -Taste einfangen, verwenden "Strg + Tab", um das Steuerelement zu verlassen, obwohl ich nicht weiß, wie häufig diese Verknüpfung ist.

Wenn Sie die Tabulatortaste einfangen und keine Tastenkombination zum Beenden bereitstellen, haben Sie gerade einen Benutzer eingefangen, der in diesem Steuerelement keine Maus verwenden kann.

1
eBeth

Ich verstehe, was Sie meinen, aber das Tabulieren für den Code ist meiner Meinung nach besser, da ich in diesem Fall das Tabulieren lieber im Code hätte, als den Fokus zu ändern.

Wenn ich Code manuell eingebe, wird dort der Großteil meiner Zeit in die Steuerelemente investiert, sodass die Registerkarte dort am hilfreichsten sein soll.

Wenn ich Code einfüge, bin ich nicht gerade dabei, durch jedes Steuerelement zu tippen, also würde ich wahrscheinlich sowieso manuell in das nächste Feld klicken.

Das einzige Mal, wenn es ärgerlich ist, wenn ich den Fokus nacheinander durch alle Felder bewegen möchte, aber da Sie möchten, dass die Leute Code eingeben und ihn trotzdem nicht überspringen, denke ich nicht, dass es ein zu großes Problem ist. Die Vorteile überwiegen in diesem Fall die Kosten.

Also - es sei denn, jemand kann sich eine Möglichkeit vorstellen, den Kuchen zu essen nd ihn zu essen, dann benutze ihn für den Code. Selbst wenn Sie den Code automatisch formatiert und den Code automatisch eingerückt haben, denke ich, wenn Sie sich in einer "Code" -Stimmung befinden und nur möchten, dass Registerkarten so funktionieren, wie sie in Ihrem bevorzugten Editor funktionieren.

Beachten Sie, dass dies ein Sonderfall für CODE ist, bei dem Tabulatoren zum Einrücken häufig verwendet werden. Wenn wir über Text sprechen würden, wie das Feld, das ich gerade eintippe, wäre ich anderer Meinung

1
Roger Attrill

Ich denke, es hängt davon ab, wer Ihr Publikum ist. Aber ich habe eine kleine Änderung am Javascript vorgenommen, bei der Sie durch einfaches Drücken von Escape zum nächsten Feld gelangen, das eine Option sein könnte, obwohl es vielleicht keine großartige ist. Ich habe es auch so gemacht, dass ein Shift + Tab funktioniert, wenn Sie sich im Textbereich befinden.

http://jsfiddle.net/uu9ft/10/

1
Dennis

Vielleicht können Sie beides haben; Wenn die letzte vom Benutzer ausgeführte Aktion das Aufrufen des Code-Editors war, fangen Sie die nicht ab Tab Taste (Ermöglicht das Verschieben des Fokus auf das nächste Feld.) Auf diese Weise können Benutzer Formulare durchblättern, bis sie mit der Bearbeitung ihres Codes beginnen (an diesem Punkt kann der Benutzer mit der Tabulatortaste einrücken.)

0
Adam Maras

Nun, Tabbing, um zum nächsten Feld zu gelangen, ist besser, weil es üblich ist. Sie können den folgenden Textbereich des Stapelüberlaufs sehen.

enter image description here

wenn Sie sich http://jsfiddle.net/ Code-Editoren ansehen, sehen Sie hier, wie Sie nach Einrückungen suchen, was in Rich-Code-Editoren eine gute Praxis ist.

Wenn Sie also einen Rich-Code-Editor erstellen, empfehle ich Ihnen, Tabulatoren zum Einrücken zu verwenden.

0
Pir Abdul

Für das Code-Eingabefeld: Wenn Sie ein Leerzeichen eingeben, das das erste Zeichen in der Zeile ist oder dem Tabulatoren vorangestellt sind, konvertieren Sie es in eine Registerkarte.

Erhält die Tab-Key-Funktionalität, behält die "natürliche Bearbeitung" bei und behebt über 90% der Anwendungsfälle.

Sie können einer Problemumgehung wie Shift-Space erlauben, führende Leerzeichen einzugeben (nicht sicher, ob diese Unterscheidung in Javascript möglich ist).

0
peterchen

Wenn das Textsteuerelement einem generischen Textverarbeitungsprogramm (oder sogar einem generischen RTE-Controller wie TinyMCE) ähnelt, werden Benutzer meiner Meinung nach nicht überrascht sein, wenn das Tabulieren den Text und nicht den Fokus des Formulars beeinflusst.

Könnte ich ähnlich wie Peter auch vorschlagen, doppelte Leerzeichen automatisch in Tabulatoren umzuwandeln? Das heißt, wenn der Benutzer zwei Leerzeichen eingibt, fügt der Editor zwei weitere hinzu. AFAIK, die meisten Sprachen, die sich für Einrückungen interessieren (z. B. Python), tauschen gerne Tabulatoren und Vierfach-Leerzeichen aus (obwohl es möglicherweise Ausnahmen gibt - überprüfen Sie dies).

0