JavaScript/Anwendung und Praxis/Formulare: Text an Cursorposition einfügen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zum Autor

Name:
Torsten Anacker
E-Mail:

Hinweis

Wer ein Forum/Gästebuch/Blog schreiben will und dabei auf BBCode setzt, der wird das benötigen. Mittlerweile können WYSIWYG-Editoren (TinyMCE) und "raffiniertere Textareas" wie z.B: Ace <http://ace.c9.io/> diese Funktion ersetzen.

Formulare sind ein elementarer Bestandteil vieler Internetseiten. Sie werden häufig benutzt, um dem Benutzer Einträge in Gästebüchern, Foren, Weblogs u.a.m. zu ermöglichen. Um diese Einträge optisch ansprechend gestalten zu können, z.B. durch Anzeigen von Hyperlinks oder Hervorheben von Textpassagen, wird oftmals das Formatieren von einzelnen Eingaben mit Hilfe so genannter BBCodes angeboten. Dazu gehört es auch, dass dem Anwender eine komfortable Möglichkeit geboten wird, diese Formatierungen im Formular anwenden zu können, ohne dass er detailliertes Wissen über BBCodes oder HTML mitbringen muss. Der hier vorgestellte JavaScript-Code ermöglicht es, durch Aufruf einer Funktion BBCode oder auch HTML-Tags in eine Textarea einzufügen. Möglich sind sowohl das Einfügen leerer Elemente als auch das Formatieren von markiertem Text.


[Bearbeiten] Beispiel mit Erläuterungen

Beispiel: Einfügen von Inhalten in eine Textarea ansehen …
function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['eingabe'];
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* für die übrigen Browser */
  else
  {
    /* Abfrage der Einfügeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfügen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}

Im HTML-Bereich der Seite wird ein einfaches Formular mit einer Textarea definiert, die mit einem Standardtext vorbelegt ist, um die Funktionsweise des Scripts zu demonstrieren. Durch einen Klick auf den Button "Einfügen" wird die Funktion insert mit entsprechenden Parametern (Start-Tag und End-Tag) aufgerufen. Sie soll einen markierten Text als Link nach dem Schema [link]http://www.example.org[/link] formatieren bzw. ein leeres Link-Element einfügen, falls kein Text markiert wurde.

Die Funktion insert startet damit, in der Variablen input eine Referenz auf die Textarea zu speichern. Dazu werden der Name des Formulars (im Beispiel formular) und der Name der Textarea (im Beispiel eingabe) verwendet. Die eigentliche Funktion gliedert sich in drei Teile, die je nach den Fähigkeiten des Browsers bestimmte Techniken zum Einfügen der Formatierung verwenden. Zuerst wird das Objekt document.selection abgefragt, das nur vom Internet Explorer unterstützt wird. Falls es existiert, wird mit dessen Hilfe der Formatierungscode eingefügt und die Cursorposition angepasst. Falls document.selection nicht zur Verfügung steht, wird im nächsten Zweig geprüft, ob der Browser die Eigenschaft selectionStart unterstützt. Dies ist bei Browsern mit neuerer Gecko-Engine (z.B. Firefox, Chrome und Safari) der Fall.

Für den Fall, dass weder document.selection noch selectionStart bekannt sind, enthält der letzte Zweig den Code für alle anderen Browser (insbesondere Opera). In diesen Browsern besteht keine Möglichkeit, den markierten Text oder die Cursorposition in der Textarea auszulesen. Sowohl die Einfügeposition als auch der zu formatierende Text müssen daher mit Hilfe von window.prompt() abgefragt werden.

Beachten Sie: Das Script können Sie universell einsetzen. Die einzigen erforderlichen Parameter sind der Code, der vor der markierten Stelle eingefügt werden soll, und der Code, der nach der markierten Stelle eingefügt werden soll. Der einzufügende Code kann auch in einem HTML-Element bestehen. Sie können die insert-Funktion beispielsweise mit insert('<strong>', '<\/strong>' ) aufrufen, um ein strong-Element einzufügen, welches den Text hervorhebt. Es ist ebenfalls möglich, einteilige Codes an der Cursorposition einzufügen, etwa besondere Zeichen oder Emoticons. Übergeben Sie der Funktion in diesem Fall einfach einen leeren String als zweiten Parameter, zum Beispiel insert(' :-) ', ).

Über die Methode range.move() im Internet Explorer bzw. die selectionStart und selectionEnd in Browsern mit Gecko-Engine wird die Cursorposition nach dem Einfügen angepasst und gegebenenfalls die Markierung aufgehoben. Wenn vorher Text markiert wurde und in den Formatierungscode eingebettet wurde, dann wird der Cursor nach dem End-Tag platziert. Wenn kein Text markiert wurde und leerer Formatierungscode eingefügt wird, wird der Cursor zwischen dem Start- und dem End-Tag platziert. Sie können diese Korrekturen verhindern, indem Sie die entsprechenden Teile in der Funktion herausnehmen. Natürlich können Sie diese auch an Ihre Bedürfnisse anpassen.

Das Abfragen der Einfügeposition durch das prompt() -Fenster im dritten Teil der Funktion verwirrt den Anwender möglicherweise. Stattdessen können Sie den Formatierungscode automatisch an das Ende des eingegebenen Textes einfügen lassen. Ersetzen Sie dazu die Zeilen, die sich mit der Abfrage von pos beschäftigen, einfach durch den Befehl var pos = input.value.length; .

Mithilfe eines regulären Ausdrucks wird überprüft, ob die eingegebene Einfügeposition eine Zahl ist. Der reguläre Ausdruck wurde mit der eher unüblichen langen Schreibweise new RegExp('^[0-9]{0,3}$') erzeugt, damit auch der Browser Opera 5.x den Code versteht. Diese Schreibweise ist gleichwertig zur kürzeren /^[0-9]{0,3}$/ .

[Bearbeiten] Weiterführende Links

Die folgenden Stellen werden empfohlen, um das obige Beispiel besser zu verstehen, oder um weitere Möglichkeiten und Details zu erfahren.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML