JavaScript & Textarea

Textareas dienen der Eingabe von mehrzeiligen Textdaten in einem Formular. Sie werden beispielsweise bei Kontaktformularen dazu verwendet, um den Besucher zu ermöglichen eine individuelle Anfrage zu formulieren. Anders als bei einzeiligen Eingabefeldern wird bei der Textarea ein zur Vorbelegung bestimmtes String nicht in der Value-Eigenschaft, sondern als normaler Text innerhalb des Texarea-Tags – zwischen dem Öffnenden und dem Schliessenden Tag – angegeben. Ob und welcher Text durch den Benutzer selektiert wurde (selection) kann mit JavaScript ebenso über das Textarea-Element erfragt werden, wie die Position innerhalb des Textes , an welcher sich der Cursor gerade befindet.

JavaScript Textarea Beispiel 1: Textarea Value (Text im Eingabeelement)

Der nun folgende JavaScript Code zeigt, wie Sie auf den in einer Textarea eingegebenen Inhalt mit Hilfe von JavaScript zugreifen können. Zunächst wird ein Formular definiert, in dem sich eine Textarea, sowie ein Button befindet. Der Button wird über das onClick-Event mit einem Event-Handler verbunden. Dies führt dazu, dass dieser Event-Handler automatisch ausgeführt wird, sobald der Benutzer auf den Button geklickt hat.

In der Folge wird eine JavaScript Funktion definiert, die den zuständigen Event-Handler repräsentiert. Diese Funktion trägt den Namen getValue und erhält als einzigen Parameter einen Verweis auf das Textarea-Element, dessen Inhalt ausgelesen und danach ausgegeben werden soll. Über ein If-Statement wird als nächstes abgefragt, ob die als Parameter angegebene Variable ein HTML-Element vom Typ Textarea enthält. Wenn dem so ist, kann mit der weiteren Verarbeitung fortgefahren werden.

Der Inhalt (Text) des Textarea-Feldes wird danach in einer Variablen gespeichert, wobei der Inhalt mittels Value-Eigenschaft der Textarea abgefragt und entsprechend zugewiesen wird. Ist das Feld leer, so wird dann eine entsprechende Meldung ausgegeben, die auf diese Tatsache hinweist. Anderenfalls wird der Inhalt über eine Alert-Box ausgegeben. Die Alert-Box ist eines der Dialogfenster, die durch das Window-Object aufgerufen werden können.

<form name="formular">
  <textarea name="feld"></textarea><br>
  <input type="button" onclick="getValue (document.formular.feld)" value="Inhalt auslesen" />
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Die Funktion getValue gibt den in einer Textarea eingegebene
  // Zeichenkette in einer Alert-Box aus.
  function getValue (textarea) {
    // Angegebenes Element vom Typ texarea?
    if (textarea.type == 'textarea') {
      // Inhalt des Eingabefeldes
      var value = document.formular.feld.value;

      // Eingabefeld leer?
      if (value.length == 0)
        // Wenn ja, entsprechende Meldung ausgeben
        alert ('Texarea ist leer!');
      else
        // Ausgabe des in der Textarea gespeicherten Inhalts
        alert ('Inhalt des Feldes: ' + value);
    }
  }
  // -->
  </script>
</form>

JavaScript Input Cursor Beispiel 2: Textarea Cursor Position (Textcursor)

Bei Eingabeelementen, die zur Eingabe von Text dienen, kann die Position des Textcursors ebenfalls per JavaScript bestimmt werden. Hierzu kann wiederum das Document-Object verwendet werden, um auf das Formular und die darin enthaltenen Eingabeelemente zuzugreifen. Eben dies geschieht im unteren Script-Abschnitt, wo über die SelectionStart- und die SelectionEnd-Eigenschaft die aktuelle Position des Cursors abgefragt wird. Die auf diese Weise ermittelten Werte werden in der unten stehenden Funktion mit dem Namen wo_bin_ich in entsprechenden Variablen gespeichert. Der Aufruf der Funktion, welche dies bewerkstelligt, wird auch hier wieder mittels Event-Object realisiert.

Weiter unten werden die Informationen zur Ausgabe in einem String zusammengestellt. Dabei wird zunächst die Cursorposition und dann – soweit eine Selektion eines Textbereichs vorgenommen wurde – der selektierte Text und die Indexpositionen von SelectionStart und SelectionEnd an das Ausgabestring angehängt. Am Ende der Funktion werden die so gesammelten Daten in einer Alert-Box ausgegeben.

<form name="formular2">
  <textarea name="feld">Hier steht was drin!</textarea><br>
  <input type="button" onclick="wo_bin_ich ()" value="Wo bin ich?" />
  <script language="javascript" type="text/javascript">
  <!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Folgende Funktion ermittelt die derzeitige Position des
  // Textcursors in einer Textarea und gibt diese, zusammen mit
  // dem evtl. selektierten Text in einer Dialog-Box aus.
  function wo_bin_ich () {
    // Variable zur Speicherung eines Ausgabetextes
    var selectionInfo = '';
    // Index der Startposition
    var start = document.formular2.feld.selectionStart;
    // Endposition der Selektion
    var end = document.formular2.feld.selectionEnd;
    // Inhalt des Eingabefeldes
    var value = document.formular2.feld.value;

    // Position des Cursors im Eingabefeld soll ausgegeben werden
    selectionInfo += 'Cursorposition: ' + start;
    // Wenn Start- und End-Index der Selektion unterschiedlich
    // sind, dann hat der Benutzer einen Textbereich ausgewählt
    if (start != end)
      // In diesem Falle soll auch die selektierte Zeichenkette
      // ausgegeben werden.
      selectionInfo += '\nZeichen selektiert: ' + value.substring (start, end) +
           ' (Index ' + start + ' bis ' + end + ')';
    document.formular2.feld.focus ();

    // Ausgabe der ermittelten Informationen in einer Aler-Box
    alert (selectionInfo);
  }
  // -->
  </script>
</form>