Normalerweise springt die Tabulatortaste zum nächsten fokussierbaren Element. Dies fügt stattdessen ein Tabulatorzeichen ein.
HTMLTextAreaElement.prototype.getCaretPosition = function () { //return the caret position of the textarea
return this.selectionStart;
};
HTMLTextAreaElement.prototype.setCaretPosition = function (position) { //change the caret position of the textarea
this.selectionStart = position;
this.selectionEnd = position;
this.focus();
};
HTMLTextAreaElement.prototype.hasSelection = function () { //if the textarea has selection then return true
if (this.selectionStart == this.selectionEnd) {
return false;
} else {
return true;
}
};
HTMLTextAreaElement.prototype.getSelectedText = function () { //return the selection text
return this.value.substring(this.selectionStart, this.selectionEnd);
};
HTMLTextAreaElement.prototype.setSelection = function (start, end) { //change the selection area of the textarea
this.selectionStart = start;
this.selectionEnd = end;
this.focus();
};
var textarea = document.getElementsByTagName('textarea')[0];
textarea.onkeydown = function(event) {
//support tab on textarea
if (event.keyCode == 9) { //tab was pressed
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() + " ".length;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
return false;
}
if(event.keyCode == 8){ //backspace
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
var newCaretPosition;
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 37){ //left arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() - 3;
textarea.setCaretPosition(newCaretPosition);
}
}
if(event.keyCode == 39){ //right arrow
var newCaretPosition;
if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space
newCaretPosition = textarea.getCaretPosition() + 3;
textarea.setCaretPosition(newCaretPosition);
}
}
}
Ich habe diesen Code eingereicht, um Entwicklern die Manipulation der Auswahl und der Cursorposition des Textbereichs zu ermöglichen, nicht für die Tabulatorunterstützung.
Die Tabulatorunterstützung war nur ein Beispiel, und Sie benötigen nicht den gesamten Code, um Tabs zu unterstützen, verwenden Sie einfach die ersten beiden Methoden: http://jsfiddle.net/joaocolombo/wWk4x/
Und die Referenz-URL ist falsch, hier ist die richtige.
Es ist ein cooles Feature, aber ich würde es nicht empfehlen.
Der wichtigste Grund: Sie ändern das Standardverhalten des Browsers.
Wie wechseln Sie zum nächsten Formularelement, nachdem Sie mit Ihrem Textbereich fertig sind? Benutzen Sie die Maus? Ich persönlich hasse es, wenn ich nicht durch ein Formular tabulieren kann. Wenn ich an der Tastatur sitze, sitze ich an der Tastatur. Ich möchte nicht zwischen Tastatur und Maus wechseln, wenn ich ein Formular ausfülle.
Hängt davon ab, was Sie bauen. Ein benutzerdefinierter CSS-Bereich im Backend für ein WordPress-Theme oder eine Code-Schnipsel-Seite wie Snippi sind gute Beispiele, wo dies nützlich wäre. 2 Cents.
@Robin
Dieses Feature ist NICHT für Formulare mit mehreren Eingaben gedacht, sondern für etwas wie einen Blog oder ein Formular mit einer einzigen Eingabe. Es ist das einzige Element, mit dem Sie arbeiten, wie Markdown oder etwas Ähnliches. Wenn Sie Markdown sehr oft verwenden, werden Sie verrückt, wenn Sie jedes Mal 4 Leerzeichen verwenden müssen. In allen anderen Formularen verwenden Sie dies natürlich nicht. Warum sollten Sie Tabs in einem Kommentarfenster wie diesem verwenden, das ergibt keinen Sinn.
Übrigens... Sie könnten die Funktion implementieren, bei der ein zweifaches Drücken der Tabulatortaste den anfänglichen Wechsel zur nächsten Eingabe auslöst
Die einfachste
Verwendung:
enableTab('textarea-id');⇒ DEMOEs funktioniert wie erwartet. Ich liebe die einfachste.
@Luke, ich gebe Ihnen ein Beispiel, wann Tabulator ein Muss ist. Stellen Sie sich vor, Sie haben einen Bereich, in dem Sie Benutzern erlauben möchten, Quellcode einzufügen/zu tippen, der später von CodeMirror transformiert und gefärbt und in einen WYSISYG-Editor oder etwas Ähnliches eingefügt wird. Das Tippen von Code ohne Tabulator kann Ihren mentalen Zustand wirklich zerstören.
Entschuldigen Sie meine Unwissenheit – warum fügen wir nicht einfach \t ein? CSS kann verwendet werden, um die Tabulatorbreite einzustellen, also es sei denn, es gibt ein Detail, das ich nicht kenne (was durchaus möglich ist), scheint es, als sollten wir Escape-Zeichen verwenden...
:( es unterstützt keine Multi-Tab-Menü-Zeilen
Es gibt immer noch ein Problem. Rückgängig machen (Strg-Z) funktioniert auf diese Weise nicht.