Artikel mit dem Tag "Tabs"

Tabs in einer Textarea ermöglichen oder Howto: Zeichen an aktueller Cursorposition in eine Textarea einfügen

Vielleicht kommt man irgendwann zu einem Punkt, an dem man gerne in einem Textfeld die Möglichkeit hätte, an der aktuellen Cursorposition ein oder mehrere Zeichen einzufügen.
Ein konkretes Beispiel wäre, dass beim Betätigen der Tab-Taste in einem Formularfeld auch wirklich ein Tab im Feld eingefügt werden und nicht – wie sonst üblich – der Fokus auf das nächste Formularelement springen soll.

Alex King hat sich die Mühe gemacht, dafür eine Javascript-Funktion zu schreiben. Da ich gerne mit jQuery arbeite, habe ich eine Implementierung gesucht und auch gefunden:

jQuery.fn.insertAtCaret = function (myValue) {
        return this.each(function(){
                //IE support
                if (document.selection) {
                        this.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                        this.focus();
                }
                //MOZILLA/NETSCAPE support
                else if (this.selectionStart || this.selectionStart == '0') {
                        var startPos = this.selectionStart;
                        var endPos = this.selectionEnd;
                        var scrollTop = this.scrollTop;
                        this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                        this.focus();
                        this.selectionStart = startPos + myValue.length;
                        this.selectionEnd = startPos + myValue.length;
                        this.scrollTop = scrollTop;
                } else {
                        this.value += myValue;
                        this.focus();
                }
        });
};

In meinem Beispiel 1 wird – befindet sich der Fokus auf dem ersten Textfeld – beim Drücken der Backspace-Taste kein Inhalt gelöscht, sondern neuer hinzugefügt. Interessant für Menschen, denen der Konstruktivismus mehr liegt als der Destruktivismus ;-).

$('textarea#sometest').bind('keydown', function(e){
	if (e.keyCode == 8) { // Backspace
		e.preventDefault(); // Standard-Aktion verhindern
		$(this).insertAtCaret('Bitte nicht so destruktiv. Lieber ein paar mehr Zeichen!');
	}
});

Für den kompletten Code einfach den Quelltext der Beispiel-Seite betrachten.

Ein praktikableres Beispiel ist folgendes, wie oben angedeutet: Beim Drücken der Tab-Taste im zweiten Textfeld der Beispiel-Seite springt der Fokus nicht auf das nächste Textfeld, sondern ein Tab wird im Textfeld eingefügt. So etwas kann von Bedarf sein, möchte man dem Benutzer die Möglichkeit bieten, Quellcode / Text zu bearbeiten, dessen Formatierung von Bedeutung ist (in diesem Fall soll der CSS-Code möglichst lesbarsein).

$('textarea#someothertest').bind('keydown', function(e){
	if (e.keyCode == 9) { // Tab
		e.preventDefault(); // Standard-Aktion verhindern
		$(this).insertAtCaret('\t');
	}
});

Für den gesamten Code ebenfalls den Quelltext der Beispiel-Seite ansehen.

Share
Geschrieben von Philip Ehret am 25.11.2009 | Kommentare weiterlesen...