JavaScript: Formulare: Text an Cursorposition einfügen

SELFHTML aktuell Artikel JavaScript
	Formulare: Text an Cursorposition einfügen
	Torsten Anacker Hinweise zum Thema Beispiel mit Erläuterungen Weiterführende Links

Torsten Anacker

E-Mail:	torsten@anaboe.net

Bei Fragen zu diesem Beitrag bitte den Autor des Beitrags kontaktieren!

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.

Beispiel mit Erläuterungen

Beispiel

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Einf&uuml;gen von Inhalten in eine Textarea</title>
<script type="text/javascript">
<!--
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);
  }
}
//-->
</script>
</head>
<body>
  <h1>Demo: Einf&uuml;gen von Inhalten in eine Textarea</h1>
  <p>Positionieren Sie einfach den Cursor innerhalb der textarea oder markieren Sie Text darin.
     W&auml;hlen Sie dann "Einf&uuml;gen", um <code>[link]...[/link]</code> an dieser Stelle
     einf&uuml;gen zu lassen, sofern es der Browser erm&ouml;glicht.</p>
  <form name="formular" action="">
    <p><textarea name="eingabe" cols="30" rows="10">Ihre Nachricht</textarea></p>
    <p><input type="button" value="Einfügen" onClick="insert('[link]', '[/link]')"></p>
  </form>
</body>
</html>

Erläuterung:

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. Netscape ab Version 7, Mozilla und Firefox) 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.

Der obige Code wurde erfolgreich getestet im Internet Explorer 5.0 und höher, Mozilla 1.0.1 und höher, in Netscape 4.79 und höher sowie in Opera 5.12 und höher. Mozilla unterstützt selectionStart und damit das automatische Einfügen an der Cursorposition ab Version 1.1 Beta.

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}$/.

Weiterführende Links

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

  JavaScript-Zugriff auf Formularelemente
  Reguläre Ausdrücke in JavaScript
  Die Methode substr bei String-Objekten
MSDN: Das selection-Objekt
MSDN: Das TextRange-Objekt
JavaScript-Unterstützung in Opera 7
Gecko DOM-Referenz