Eingaben des Nutzers

Text-Eingabe in eine Prompt-Box

Eine prompt-Box ist ein Dialogfenster, welches ein Eingabefeld, einen OK-Button und einen Abbrechen-Button enthält. Die Box kann mit einem Aufforderungstext und einem vorbelegten Eingabefeld aufgerufen werden, die beide in der Argumentklammer anzugeben sind. Als Ergebnis des Aufrufes erhält man nach Drücken des OK-Buttons den eingegebenen Text; wenn "Abbrechen" gedrückt wird, meldet die Variable Null zurück. Gerade haben Sie, eine Prozedur hinter sich, die diese Art der Eingabe nutzt. Der zugehörige Code ist im Head untergebracht und lautet:

<script language="JavaScript">
var ergebnistext=prompt("Wie heißen Sie?","");
if(ergebnistext==""||ergebnistext==null) history.back(); else alert("Hallo, "+ ergebnistext);
</script>

Sinnvolle(?) Anwendungen dieser Eingabemöglichkeit wäre etwa die Personalisierung, also Anrede des Lesers mit dem Namen. Wie sie wahrscheinlich hier oben im Text sehen können, funktioniert das höchst unzureichend. Auch das Erfragen eines Paßworts, das den Seitenzugang auf einen bestimmten Personenkreis beschränkt, hat nur mäßigen Sinn. Mit JavaScript allein läßt sich der richtige Wert nur unzureichend verstecken.

Text-Eingabe in Formularelemente

Formular-Elemente sind aus HTML bekannt. Sie sind für Eingaben bestimmt und ihre Ergebnisse können bei HTML im wesentlichen nur übernommen und etwa per E-Mail an der Seitenautor geschickt werden. Alle können nun mit JavaScript ausgewertet, manipuliert und ihre Ergebnisse überprüft werden. Speziell Texte können in die Typen: 'text' und 'textarea' eingegeben werden. Um ein Formularelement auswerten zu können, muß es adressierbar sein. Dazu gibt es zwei Möglichkeiten.

Mit den Mitteln von HTML kann jedes Formularelement einen eindeutigen Namen erhalten. Der Aufruf eines Elementes in Javascript erfolgt hierarchisch in der Form: document.formularname.elementname
In JavaScript werden alle Formulare und ihre Elemente in speziellen Arrays gespeichert, die in der Reihenfolge des Auftretens im von 0 beginnend durchnumeriert werden. Unabhängig von den Namen kann das erste Formular mit document.form[0], das dritte mit document.form[2] angesprochen werden. Für jedes Formular wird weiterhin ein Array elements[] geführt, in dem die Formularelemente abgelegt sind, wieder in der Reihenfolge ihres Auftretens numeriert.

Eintrag in einem Textfeld
Der Text ist mit der Eigenschaft 'value' verknüpft. Ein solcher kann bei Öffnung des Feldes vorgegeben werden, z.B. um den Nutzer aufzufordern. Er kann vom Nutzer ungeändert übernommen oder überschrieben werden. Es folgt eine solche Eingabe, die mit Hilfe einer Funktion "auswert", die zuvor im Head definiert wurde, ausgewertet (was denn sonst?) wird um geeignet zu reagieren, wenn etwa keine Eingabe erfolgte. Der Fortschritt gegen die Möglichkeiten von HTML besteht darin, daß hier nun Texteingaben auf Plausibilität geprüft und ggf. zurückgewiesen werden können (wenn etwa in einen E-Mail-Adresse kein '@' vorkommt).

<script language="JavaScript">
   function auswert()
      {
      if (document.form5.namensfeld.value=="Name?") alert("Faulheit wird bestraft werden!");
      else alert("ok " + document.form5.namensfeld.value + "!");
      }
</script>

<form name="form5">
<input type=text size=30 name="namensfeld" value="Name?">
<input type=button value="fertig" onClick="auswert()">
</form>

Textfeld und Button werden wie üblich angelegt, der Button wertet das Ereignis aus, daß er angeklickt wird.

Eintrag in ein Textarea
Im Prinzip genauso erfolgt der Zugriff auf <texarea>. Dieses ist ein eigenes Tag, das geöffnet und geschlossen werden muß und einen Container für den Text bildet. Der Inhalt heißt wieder "value" und kann vom Programm vorgegeben, vom Nutzer verändert und dann vom Programm wieder gelesen werden.

<form name="show">
<textarea name="board" cols=30 rows=10 wrap="virtual"></textarea>
<input type=button value="fertig" onClick="alert(document.show.board.value)">
</form>

Bitte den Lebenslauf eintippen:

Listbox

Die Listbox, auch Listenfeld oder Auswahlfeld genannt, ermöglicht zwar keine direkte Nutzereingabe, sie gehört aber hierher, weil sie die Auswahl unter angebotenen Möglichkeiten bietet. Sie hat in HTML eigene Tags, in Kurzform <select ...><option...></select>. Mit JavaScript gibt es Eingriffsmöglichkeiten, mit denen ein Listenfeld nachträglich manipuliert werden kann.
Mit geringem Aufwand und sicherer Funktion in allen Browsern lassen sich platzsparende Menüs oder Stichwortlisten für Suchhilfen anlegen.
Hier sollen nur die grundsätzlichen Zugriffsmöglichkeiten kurz aufgelistet werden. Zunächst der HTML-Aufruf, der Voraussetzung für weitere Eingriffe ist:

<form name="list"> <select name="wahl" onChange="auswahl()"> <option>Überschrift <option value="eins">Erster <option value="zwei">Zweiter <option value="drei">Dritter <option value="vier">Vierter <option value="fünf">Fünfter </select> </form>

Die Auswertungsfunktion, die hier auswahl() heißt, und nur das Ergebnis anzeigt, bedarf genauerer Betrachtung. Hier lautet sie

function auswahl() { num=window.document.list.wahl.selectedIndex; if(num>0)alert(window.document.list.wahl.options[num].value); }

Man sieht, der Zugriff erfolgte unter Nutzung meiner Namen für Formular (=list) und Auswahlfeld (=wahl). Nur bei den Options, die ja auch eigene Namen besitzen, wurde anders verfahren. Alle Seitenelemente sind über innere Arrays zugänglich, hier wären das forms[i], elements[j], options[k], sofern man nur die passenden Zählerwerte kennt.
Mögliche Zugriffe auf Auswahlfelder, bei denen Werte erfragt oder gesetzt werden sind:

`defaultSelected`	Vorauswahl einer Option erfragen oder setzen (hier Option 0)
`length`	Zahl der Options
`selected`	ist eine Option gewählt? Hier wird Option 0 abgefragt
`selectedIndex`	Nummer der gewählten Option
`text`	Text der gewählten Option (hier Option 4)
`value`	Wert (`=value`) der gewählten Option (hier Option 4)

Da die Zugriffe alle auch Werte setzen können, hat man die Möglichkeit, Auswahlfelder nachträglich, etwa in Abhängigkeit von Formulareingaben oder etwa dem Browser des Nutzers zu verändern.
Die Veränderung, Löschung oder Ergänzung von Options ist möglich. Einzelheiten entnehme man dem folgenden Beispielcode:

<script> window.document.list.wahl.options[3].text="Hier ist jetzt der Dritte!" ; window.document.list.wahl.options[2]=null window.document.list.wahl.options[5]=new Option; window.document.list.wahl.options[5].text="Sechster" </script>

Dieses Script wird unmittelbar nach Aufbau des obigen Auswahlfeldes aufgerufen und bewirkt Veränderungen, die in der Tabelle, die erst danach angelegt wird, für scheinbare Unstimmigkeiten sorgen.

Option-Button

bbb