JavaScript - Auf Textfelder zugreifen

input S.662 Das umfassende Referenzwerk

Ein Eingabeelement in einem HTML-Formular

Überblick

  • form.elements[i]
  • form.name

Eigenschaften

Input erbt Eigenschaften von HTML-Element und definiert oder überschreibt die folgenden Eigenschaften

  • checked

    Ein les- und schreibbarer Boolescher Wert, der angibt, ob ein Checkbox- oder Radio-Formularelement gerade aktiviert ist.

  • defaultChecked

    Ein les- und schreibbarer Boolescher Wert, der angibt, ob ein Checkbox- oder Radio-Formularelement standardmäßig aktiviert ist.

  • defaultValue

    Gibt den Text an, der anfangs im Formulearelement erscheinen soll, und der beim Zurücksetzen wiederhergestellt wird.

  • form

    Eine schreibgeschützte Referenz auf das Form-Objekt, in dem das Element steht. Beim Aufruf eines Event-Handlers referenziert das Schlüsselwort this das Formularelement, auf dem der Handler aufgerufen wurde. So kann ein Event-Handler mit this.form sich auf das Formular beziehen, das das Element enthält.

  • length

    Für das Formularelement Select gibt diese Eigenschaft an, wie viele Optionen in dem options[]-Array eines Elements vorhanden sind.

  • name

    Ein im HTML-Attribut name gespeicherter, schreibgeschützter String, der den Namen dieses Elements angibt.

  • options[]

    Für das Formularelement Select enthält dieses Array die Option-Objekte für die Optionen, die das Select-Objekt anzeigt.

  • selectedIndex

    Für das Formularelement Select gibt diese Integer an, welche der vom Select-Objekt derzeit angezeigten Optionen gerade ausgewählt ist.

  • type

    Ein schreibgeschützter String, der den Typ des Formularelements angibt.

  • value

    Ein String mit dem Wert, den das Element anzeigt und/oder der für dieses Element an den Server gesandt wird, wenn das Formular übermittelt wird, in dem das Element enthalten ist.

Methoden

  • blur()

    Entzieht dem Element den Tastaturfokus

  • click()

    Simuliert einen Mausklick auf das Formularelement

  • focus()

    Gibt dem Element den Tastaturfokus

  • select()

    Wählt bei Formularelementen, die bearbeitungsfähigen Text enthalten, aus, welcher Text in dem Element erscheinen soll.

Event-Handler

  • onblur

    Wird aufgerufen, wenn der Benutzer dem Element den Tastaturfokus entzieht.

  • onchange

    Bei Formularelementen, die keine Buttons sind, wird dieser Event-Handler aufgerufen, wenn der Benutzer einen neuen Wert eingibt oder auswählt.

  • onclick

    Bei Formularelementen, die Buttons sind, wird dieser Event-Handler aufgerufen, wenn der Benutzer den Button anklickt oder auswählt.

  • onfocus

    Wird aufgerufen, wenn der Benutzer dem Element den Tastaturfokus gibt.

Beschreibung

Form-Elemente werden im elements[]-Array des Form-Objekts gespeichert. Dieses Array enthält Input-Objekte, die die einzelnen Buttons, Eingabefelder und andere Steuerelemente des Formulars darstellen. Viele Arten von Eingabeelementen werden mit dem input-Tag erzeugt, andere mit dem select-Tag und option-Tag unnd dem textarea-Tag.

input.value

Der Wert, den einFormularelement anzeigt oder übermittelt

Überblick

  • input.value

Beschreibung

value ist eine les- und schreibare String-Eigenschaft aller Formularelemente, die angibt, welcher Wert das Element anzeigt und/oder Wert für das Element bei einer Formularübermittung verschickt wird. Die value-Eigenschaft des Text-Elements ist z.B. die Benutzereingabe, und derselbe Wert wird auch für das Formular übermittelt. Für das Checkbox-Element gibt value hingegen einen String an, der zwar angezeigt, aber nicht mit dem Formular übermittelt wird.

Beispiel1: Auf Textfelder zugreifen

<script type="text/javascript">

function zeigeDaten() {

var ausgabe = "Textfeld: " + document.forms[0].elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + document.forms[0].elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + document.forms[0].elements["Kommentar"].value;

alert(ausgabe);

}

</script>

Der Ausdruck document.forms[0] wiederholt sich immer wieder, daher wird eine Variable eingeführt.

Beispiel2: Mit Variable f

<script type="text/javascript">

function zeigeDaten() {

var f = document.forms[0];

var ausgabe = "Textfeld: " + f.elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + f.elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + f.elements["Kommentar"].value;

alert(ausgabe);

}

</script>

Anstatt die Variable f zu definieren, wird beim Funktionaufruf der Parameter this.form übergeben, der auf das aktuelle Formular verweist. this => dieser Button das aktuelle Element, this.form => dieser Button in diesem Formular

<input type="button" onClick="zeigeDaten(this.form)" value="Registrierung" />

Beispiel3: Mit Parameter this.form

<script type="text/javascript">

function zeigeDaten(f) {

//var f = document.forms[0];

var ausgabe = "Textfeld: " + f.elements["Benutzername"].value;

ausgabe += "\nPasswortfeld: " + f.elements["Passwort"].value;

ausgabe += "\nMehrzeiliges Textfeld: " + f.elements["Kommentar"].value;

alert(ausgabe);

}

</script>

Formular zur Registrierung:

Benutzername:

Passwort:

Geschlecht: weiblich    männlich

Land:

Interessen:

Kommentar:

Ich akzeptiere die AGB

zurück