Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

elements

Informationsseite

nach unten elements: Allgemeines zur Verwendung

Eigenschaften:

nach unten checked (Angekreuzt)
nach unten defaultChecked (vorangekreuzt)
nach unten defaultValue (voreingegebener Wert)
nach unten disabled (Element ausgrauen)
nach unten form (Verweis auf das zugehörigen Formulars)
nach unten length (Anzahl der Elemente eines Formulares)
nach unten name (Elementname)
nach unten readOnly (Element nur lesen)
nach unten type (Elementtyp)
nach unten value (Elementwert/-inhalt)

Methoden:

nach unten blur() (Element verlassen)
nach unten click() (Element anklicken)
nach unten focus() (auf Element positionieren)
nach unten handleEvent() (Ereignis verarbeiten)
nach unten select() (Text selektieren)

Unterobjekte:

Seite options

 nach unten 

elements: Allgemeines zur Verwendung

Mit dem Objekt elements, das in der JavaScript-Objekthierarchie unterhalb des Seite forms-Objekts liegt, haben Sie Zugriff auf Elemente eines Formulars.

Es stehen folgende Arten zur Verfügung, mit JavaScript ein bestimmtes Formularelement anzusprechen:

Schema 1 / Beispiel 1:

document.forms[#].elements[#].Eigenschaft
document.forms[#].elements[#].Methode()

document.forms[0].elements[0].value = "Unsinn";
document.forms[0].elements[0].blur();

Schema 2 / Beispiel 2:

document.Formularname.Elementname.Eigenschaft
document.Formularname.Elementname.Methode()

document.Testformular.Eingabe.value = "Unsinn";
document.Testformular.Eingabe.blur();

Schema 3 / Beispiel 3:

document.forms.Formularname.elements.Elementname.Eigenschaft
document.forms.Formularname.elements.Elementname.Methode()

document.forms.Testformular.elements.Eingabe.value = "Unsinn";
document.forms.Testformular.elements.Eingabe.blur();

Schema 4 / Beispiel 4:

document.forms["Formularname"].elements["Elementname"].Eigenschaft
document.forms["Formularname"].elements["Elementname"].Methode()

document.forms["Testformular"].elements["Eingabe"].value = "Unsinn";
document.forms["Testformular"].elements["Eingabe"].blur();

Erläuterung:

Formularelemente können Sie auf folgende Arten ansprechen:

  1. mit einer Indexnummer des Formulars und des Elements (wie in Schema 1 / Beispiel 1)
    Bei Verwendung von Indexnummern geben Sie document.forms an und dahinter in eckigen Klammern, das wievielte Formular in der Datei Sie meinen. Beachten Sie, dass der Zähler bei 0 beginnt, d.h. das erste Formular sprechen Sie mit document.forms[0] an, das zweite Formular mit document.forms[1] usw. Beim Zählen gilt die Reihenfolge, in der die <form>-Tags in der Datei notiert sind. Dann folgt die Angabe .elements zum Zugriff auf das zugehörige elements-Unterobjekt. Auch dahinter notieren Sie wieder eine Indexnummer in eckigen Klammern. Erneut wird bei 0 zu zählen begonnen, d.h. das erste Element innerhalb eines Formulars hat die Indexnummer 0, das zweite die Indexnummer 1 usw. Sie können zwischen den eckigen Klammern auch eine Zahl-Variable notieren, die die Indexnummer des Formulars bzw. des Formularelements enthält.
  2. mit dem Namen des Formulars und des Elements direkt über das document-Objekt (wie in Schema 2 / Beispiel 2)
    Wie auch verschiedene andere Elemente mit name-Attributen können Sie Formulare mit Namen als Objekte direkt unterhalb des document-Objekts ansprechen. Dabei geben Sie mit document.Formularname.Elementname den Namen des Formulars und des Elements an, den Sie bei der Definition des Formulars und des Elements in den entsprechenden HTML-Tags im Attribut name angegeben haben.
  3. mit dem Namen des Formulars und dem Namen des Elements über das document.forms-Objekt und das zugehörige elements-Objekt (wie in Schema 3 / Beispiel 3)
    Mit document.forms.Formularname wird dabei das Formular angesprochen und über das Unterobjekt .elements.Elementname das fragliche Formularelement. Formularname und Elementname entsprechen jeweils dem name-Attribut des form- bzw. Formularfeld-Elements, das Sie ansprechen möchten. Diese lange Schreibweise erlaubt verständlicheren Code, denn es ist sofort ersichtlich, dass ein Formularelement angesprochen wird.
  4. mit dem Namen des Formulars und des Elements als Indexnamen (wie in Schema 4 / Beispiel 4)
    Diese Art ist eine zu Schema 3 äquivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten über objekt.unterobjekt gleichwertig zu objekt["unterobjekt"]. Geben Sie mit document.forms["Formularname"].elements["Elementname"] den Namen des Formulars und des Elements als String an. Diese Schreibweise wird insbesondere für den Zugriff auf Formularelemente benötigt, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 und 3 unmöglich machen. Sie können zwischen den eckigen Klammern auch eine String-Variable notieren, die den Formularnamen bzw. den Elementnamen enthält.

Ein Mischen der genannten Zugriffsvarianten für die Adressierung des Formulars und seiner Elemente ist möglich. Beispiele: document.forms.Formularname.elements["Elementname"] und document.forms[1].Elementname. Sie sollten allerdings abwägen, welche Variante Sie auswählen und diese möglichst konsequent verwenden. Beispielsweise das Ansprechen von Formularen und Formularelementen über die Indexnummer hat einige Tücken. Sobald Sie auf der HTML-Seite die Reihenfolge ändern oder ein weiteres Formular hinzufügen, funktionieren ihre Scripte nicht mehr zuverlässig.

Beachten Sie:

Hinter dem, was hier als elements-Objekt bezeichnet wird, verbergen sich in Wirklichkeit mehrere, allerdings sehr ähnliche JavaScript-Objekte. So gibt es Objekte jeweils für die verschiedenen Formularelementypen: Eingabefelder, Auswahllisten und diverse Arten von Buttons. All diese Objekte werden auf die gleiche Art und Weise angesprochen, Sie unterscheiden sich jedoch in ihren Eigenschaften und Methoden. Bei den Eigenschaften und Methoden in diesem Abschnitt ist daher immer vermerkt, auf welche Elementtypen die jeweilige Eigenschaft bzw. Methode anwendbar ist.

Folgende Elementtypen werden dabei unterschieden (die Verweise führen zu den entsprechenden Beschreibungen in der HTML-Dokumentation):

Gruppenelemente:

Checkboxen und Radio-Buttons bilden normalerweise Gruppen mehrerer zusammengehöriger Elemente, die einen gleichen Wert im name-Attribut haben und sich nur das value-Attribut unterscheiden. Solche Gruppen mit gleichen Namen bilden in JavaScript wiederum einen Array.

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Formular" action="" method="get">
<input type="radio" name="Favoriten" value="Heino">
<input type="radio" name="Favoriten" value="Gildo">
<input type="radio" name="Favoriten" value="Marianne">
</form>
<script type="text/javascript">
document.Formular.Favoriten[2].checked = true;
</script>
</body></html>

Erläuterung:

Im Beispiel ist ein Formular mit mehreren Radio-Buttons definiert. Die Gruppe zusammengehöriger Radio-Buttons hat den gleichen Namen. In JavaScript können Sie einzelne solcher Buttons ansprechen, indem Sie das Element (als Gruppe) ansprechen. Hinter dem Elementnamen notieren Sie dann in eckigen Klammern die Indexnummer des gewünschten Elements. Im Beispiel wird Favoriten[2] angesprochen. Das ist das dritte Element der Gruppe.

Beachten Sie:

Der Zugriff auf die Auswahlmöglichkeiten einer Seite Auswahlliste wird hier nicht beschrieben. Dazu steht das Unterobjekt Seite options zur Verfügung.

Über das elements-Objekt werden gemäß dem HTML-spezifischen DOM die Seite Elementobjekte von Formularelementen angesprochen. Das heißt, Sie haben neben den auf dieser Seite aufgelisteten Zugriff auf weitere Eigenschaften und Methoden, je nachdem, um welchen Elementtyp es sich handelt. Beachten Sie daher die Referenz zu den jeweiligen benutzten HTML-Elementen:

Klick-Buttons:
Seite input oder Seite button
Checkboxen, Felder für Datei-Upload, Versteckte Elemente, Passwortfelder, Radio-Buttons, Abbrechen-Buttons, Absendebuttons und einzeilige Eingabefelder:
Seite input
mehrzeilige Eingabefelder:
Seite textarea
Auswahllisten:
Seite select, Seite optgroup und Seite option

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern checked

Speichert, ob bzw. dass ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Radio-Buttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Weiter () {
  if (document.Testform.Art[0].checked == true) {
    window.location.href = "frmdatei.htm";
  } else if (document.Testform.Art[1].checked == true) {
    window.location.href = "datei.htm";
  } else {
    alert("Bitte eine Auswahl treffen");
  }
}
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit Frames
<input type="radio" name="Art" value="ohne"> ohne Frames
<br><input type="button" value="Starten" onclick="Weiter()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Der Anwender kann dabei auswählen, ob er die folgenden Seiten des Projekts mit Frames oder ohne Frames sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radio-Buttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen (Seite location.href). Wenn keiner der beiden Radio-Buttons aktiviert ist, wird eine Fehlermeldung ausgegeben.

Beachten Sie:

Sie können in Opera 5.12 unter Windows die Eigenschaft checked für Radioboxen erst dann ändern, wenn der Aufbau der Seite abgeschlossen ist.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern defaultChecked

Speichert, ob bzw. dass ein Radio- oder Checkbutton per Voreinstellung aktiviert ist oder nicht. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Checkboxen Seite Radio-Buttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Weiter () {
  if (document.Testform.Art[0].checked == true) {
    window.location.href = "frminhalt.htm";
  } else {
    window.location.href = "inhalt.htm";
  }
}
</script>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Art" value="mit"> mit DHTML
<input type="radio" name="Art" value="ohne"> ohne DHTML
<br><input type="button" value="Starten" onclick="Weiter()">
</form>
<script type="text/javascript">
dhtml = false;
if (document.layers || document.all || document.getElementById)
  dhtml = true;
if (dhtml == true && document.Testform.Art[0].defaultChecked == false)
  document.Testform.Art[0].checked = true;
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Der Anwender kann dabei auswählen, ob er die folgenden Seiten des Projekts mit Dynamischem HTML oder ohne sehen will. Beim Klick auf den Button Starten wird die Funktion Weiter() aufgerufen. Diese Funktion prüft, ob einer der beiden Radio-Buttons aktiviert ist. Je nachdem, welcher von beiden aktiviert ist, wird eine unterschiedliche Datei aufgerufen (Seite location.href).
Unterhalb des Formulars ist jedoch noch ein weiterer Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob eines der für Dynamisches HTML typischen Objekte Seite document.layers oder Seite document.all bzw. die typische Methode Seite document.getElementById verfügbar sind. Wenn ja, wird eine Variable dhtml auf true gesetzt. In einer weiteren Abfrage wird mit defaultChecked überprüft, ob die Auswahlmöglichkeit, DHTML zu nutzen, im Formular als Vorauswahl aktiviert ist oder nicht. Wenn nicht, und wenn DHTML aber verfügbar ist (also wenn dhtml auf truegesetzt ist), wird die Auswahlmöglichkeit für DHTML nachträglich angekreuzt.

Beachten Sie:

Opera 5.12 unter Windows interpretiert zwar die Eigenschaft defaultChecked, führt das obige Beispiel jedoch nicht aus, da die Änderung des Zustandes der Radiobox vor dem Abschluss des Ladens der Seite erfolgt. Opera 5.02 kennt die Eigenschaft defaultChecked noch nicht.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern defaultValue

Speichert den voreingestellten Text eines Eingabefeldes.

Anwendbar auf: Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
URI: <input type="text" size="40" name="uri" value="http://www.example.org/en/">
<input type="button" value="Gehe zu"
onclick="window.location.href = document.Testform.uri.value">
</form>
<script type="text/javascript">
if (navigator.language.indexOf("de") > -1) {
  document.Testform.url.defaultValue = "http://www.example.org/de/";
  document.Testform.url.value = document.Testform.url.defaultValue;
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Button. Das Eingabefeld wird mit http://www.example.org/en/ vorbelegt. Beim Klick auf den Button wird der Wert aus dem Eingabefeld an window.Seite location.href zugewiesen. Dadurch wird die entsprechende Adresse aufgerufen.
Bevor der Anwender jedoch überhaupt das Feld editieren kann, wird gleich beim Einlesen der Datei unterhalb des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Es wird abgefragt, ob in der Ausweisung des Browsers (Seite navigator.language) der Bestandteil de vorkommt (Seite indexOf()). Wenn ja, ist es ein deutschsprachiger Browser. In diesem Fall wird der defaultValue des Eingabefeldes auf http://www.example.org/de/ geändert. Der geänderte Wert wird jedoch erst sichtbar, wenn er der Eigenschaft nach unten value zugewiesen wird. Dies geschieht in der zweiten Anweisung. Das Eingabefeld des Formulars ist dann abhängig von der Sprache des Browsers mit http://www.example.org/en/ oder http://www.example.org/de/ vorbelegt.

Beachten Sie:

Opera 5.02 kennt die Eigenschaft defaultValue noch nicht. Trotzdem interpretiert auch dieser Browser das Beispiel. Das liegt daran, dass mit der Zuweisung defaultValue = "http://www.example.org/de/" der Wert des Eigenschaft manuell eingegeben wird. Sobald Sie jedoch ein JavaScript vom Originalwert abhängig machen möchten, müssen Sie berücksichtigen, dass diese Eigenschaft nicht existiert.

nach obennach unten

DOM 1.0Netscape 6.0MS IE 4.0Opera 6Mozilla Firefox 1Konqueror 3.1Safari 1.3Lesen/Ändern disabled

Speichert, ob das Formularelement verfügbar oder ausgegraut ist. Entspricht dem disabled-Attribut, siehe Seite Element ausgrauen. Mögliche Werte sind true oder false.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function wechsle_art () {
  if (document.Testform.auto[0].checked == true) {
    var deaktiviert = false;
  } else {
    var deaktiviert = true;
  }
  for (var i = 0; i < document.Testform.autoart.length; i++) {
    document.Testform.autoart[i].disabled = deaktiviert;
  }
}
</script>
</head><body>

<form action="" name="Testform">

<p>Besitzen Sie ein Auto?</p>

<p><input type="radio" name="auto" value="ja" onclick="wechsle_art();"> ja<br>
<input type="radio" name="auto" value="nein" onclick="wechsle_art();"> nein</p>

<p>Falls ja, was für ein Auto?</p>

<p><input type="radio" name="autoart"> Kleinwagen<br>
<input type="radio" name="autoart" value="kombi"> Kombi<br>
<input type="radio" name="autoart" value="limousine"> Limousine<br>
<input type="radio" name="autoart" value="sportwagen"> Sportwagen<br>
<input type="radio" name="autoart" value="kleinbus"> Kleinbus<br>
<input type="radio" name="autoart" value="andere"> andere Art</p>

</form>

</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit zwei Gruppen von Radio-Buttons. In der ersten Gruppe kann der Anwender auswählen, ob er ein Auto besitzt oder nicht. In der zweiten Gruppe kann er, falls er ein Auto besitzt, den Typ angeben. Da die zweite Gruppe nur interessant ist, wenn der Anwender die Frage "Haben Sie ein Auto?" mit "ja" beantwortet hat, werden die Radio-Buttons der zweiten Gruppe ausgegraut, wenn der Anwender "nein" wählt. Dazu haben die Radio-Buttons der ersten Gruppe einen Event-Handler Seite onclick. Beim Klicken auf einen der beiden Radio-Buttons wird die Funktion wechsle_art() ausgeführt, die in einem Script-Bereich im Seitenkopf definiert ist. Sie fragt zunächst mit einer bedingten Anweisung ab, ob die Eigenschaft nach oben checked des ersten Radio-Buttons einen positiven Wert hat. Dementsprechend wird eine Variable namens deaktiviert auf true oder false gesetzt. Anschließend werden mit einer for-Schleife alle Radio-Buttons durchlaufen, die zur Gruppe mit dem Namen autoart gehören. Die disabled-Eigenschaft jedes dieser Radio-Buttons erhält den Wert, der in der Variable deaktiviert gespeichert ist. Die dazu verwendete Zugriffsmethode wird im Abschnitt nach oben Gruppenelemente erklärt. Auf diese Weise werden nacheinander alle fraglichen Radio-Buttons aktiviert, wenn der Anwender "ja" wählt, und sie werden deaktiviert, wenn der Anwender die erste Frage mit "nein" beantwortet.

Beachten Sie:

Sie werden sich wundern, warum im Beispiel die Wahl des Event-Handlers auf onclick und nicht auf Seite onchange fiel. In der Tat ist onchange im Allgemeinen passender, um JavaScript auszuführen, wenn sich der Wert eines Formularelements ändert. Bei Radio-Buttons haben die Browser allerdings einige Fehler in Bezug auf den Event-Handler onchange. Der Internet Explorer 6 löst zwar ein solches Ereignis aus, sobald einer der Radio-Buttons z.B. durch einen Mausklick aktiviert wird. Das Ereignis wird jedoch bereits vor der tatsächlichen Aktivierung des gewählten Radio-Buttons ausgelöst. Somit liefert die Abfrage der checked-Eigenschaft unbrauchbare bzw. genau umgekehrte Werte. Wegen diesem Browserfehler wurde im Beispiel onclick statt onchange gewählt. Glücklicherweise starten die gängigen Browser auch dann ein Klick-Ereignis, wenn nicht die Maus, sondern die Tastatur zum Ändern des Radio-Buttons verwendet wurde. Somit funktioniert das Beispiel auch bei der Bedienung des Formulars ausschließlich über die Tastatur.

Netscape versteht disabled ab Version 6.0. Diese Version liefert allerdings falsche Werte für die checked-Eigenschaft der Radio-Buttons, wenn sie beim Verarbeiten des Klick-Ereignisses abgefragt werden. Das Beispiel funktioniert daher erst ab Netscape 6.1.

 nach obennach unten 

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen form

Speichert das Formular, innerhalb dessen sich das Element befindet. Hinter der Eigenschaft form können Sie nochmals alle Eigenschaften und Methoden des Seite forms-Objekts notieren.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onclick="alert(document.Testform.derButton.form.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Formulars ausgegeben.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen length

Gibt man mehreren Formularelementen den gleichen Namen, wird automatisch in JavaScript ein Array angelegt, um jedes einzelne Element ansprechen zu können. In der Eigenschaft length des Elementobjekts wird dann die Anzahl der Elemente gespeichert.

Ein Beispiel für die Anwendung ist im Seite Beispiel zu disabled zu sehen. Dort wird eine for-Schleife für alle Elemente des Namens autoart durchlaufen. document.Testform.autoart ist dabei das Array aller Radiobuttons, in document.Testform.autoart.length steht die Anzahl der Buttons, und mit document.Testform.autoart[i] wird auf einen einzelnen Button zugegriffen (und im Beispiel dann die Eigenschaft disabled gesetzt).

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern name

Speichert den Namen des Formularelements, wie er in HTML bei der Definition des Elements mit dem Attribut name zugewiesen wurde.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="button" name="derButton" value="Test"
onclick="alert(document.Testform.derButton.name)">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Button. Beim Anklicken des Buttons wird der Name des Buttons ausgegeben.

nach obennach unten

DOM 1.0Netscape 6.0MS IE 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern readOnly

Speichert, ob das Formularelement unveränderbar (nur lesen) ist. Entspricht dem readonly-Attribut, siehe Seite Element ausgrauen. Mögliche Werte sind true oder false.

Beachten Sie die im Vergleich zum HTML-Attribut abweichende Schreibweise. Diese Eigenschaft muss zwingend mit großem O geschrieben werden!

Die Anwendung ist sehr ähnlich zu der Eigenschaft nach oben disabled.

Beachten Sie:

Opera unterstützt das Auslesen der readOnly-Eigenschaft bereits in Version 5.12, das Ändern des Wertes wird allerdings erst in Version 7 korrekt umgesetzt.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen type

Speichert den Elementtyp eines Formularelements.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="radio" name="Auto" value="Porsche"> Porsche<br>
<input type="radio" name="Auto" value="Mercedes"> Mercedes<br>
Name: <input type="text" name="Name" size="30"><br>
<input type="submit" name="Absendebutton" value="Absenden">
</form>
<script type="text/javascript">
for (var i = 0; i < document.Testform.length; ++i) {
  document.write("<br>Elementname: " + document.forms[0].elements[i].name);
  document.write(", Elementtyp: " + document.forms[0].elements[i].type);
}
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit verschiedenen Elementen. Zu Testzwecken ist unterhalb des Formulars ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird für alle Elemente des Formulars mit Seite document.write() der Elementname und der Elementtyp in die Datei geschrieben.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0Lesen/Ändern value

Speichert den Wert, der in einem Formularelement eingegeben wurde bzw. diesem zugewiesen ist.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Name: <input type="text" size="30" name="Name">
<input type="submit" name="Absendebutton" value="Absenden">
<input type="hidden" name="Browser" value="">
</form>
<script type="text/javascript">
document.Testform.Browser.value = navigator.userAgent;
document.write(document.Testform.Browser.value);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, unter anderem mit einem versteckten Feld (<input type="hidden">). Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. In dem Script wird dem Wert des versteckten Formularfeldes (document.Testform.Browser.value) der Browser-Typ des Anwenders (Seite navigator.userAgent) zugewiesen. Dieser dynamisch erzeugte Formularinhalt wird mit übertragen, wenn der Anwender das Formular abschickt. In obigen Beispiel wird zur Demonstration der Wert des versteckten Feldes mit der Methode Seite document.write() in das Dokument geschrieben.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 7Mozilla Firefox 1Konqueror 3.1Safari 1.0 blur()

Entfernt den Cursor bzw. den Focus von dem betreffenden Element. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
<input type="text" name="Feld" size="30" onfocus="this.blur()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem Feld. Wenn der Anwender den Cursor in das Feld setzen will, wird der Cursor mit this.blur() sofort wieder aus dem Feld entfernt. Durch das Schlüsselwort Seite this wird der Bezug zum aktuellen Objekt hergestellt, in diesem Fall das Element Feld, und die Methode auf das dieses Objekt angewendet. Eine solche Maßnahme kann beispielsweise sinnvoll sein, wenn Sie ein Feld ausschließlich als Ausgabefeld nutzen wollen, in dem der Anwender nichts editieren können soll.

Beachten Sie:

Nicht immer wird der Cursor aus dem Eingabefeld entfernt. Eine Eingabe von Inhalt wird jedoch unterbunden.

Im Opera bis Version 6 exitiert zwar die Methode blur(), jedoch bleibt diese ohne Wirkung. Unter Opera 5.02 erzeugt die Anwendung der Methode einen JavaScript-Fehler.

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 click()

Erzeugt einen automatischen Klick auf den betreffenden Button. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Abbrechen-Buttons Seite Absendebuttons

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input type="text" size="6" name="Todesjahr">
<input type="button" name="derButton" value="Weiter" onclick="Check()">
</form>
<script type="text/javascript">
function Check () {
  if (document.Testform.Todesjahr.value != "1832") {
    window.location.href = "fehler.htm";
  } else {
    window.location.href = "erfolg.htm";
  }
}

window.setTimeout("document.Testform.derButton.click()", 10000);
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender nicht innerhalb von 10 Sekunden auf den Button Weiter klickt, geschieht dies von alleine. Dafür sorgt die letzte Anweisung in dem Script, das unterhalb des Formulars notiert ist. Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Mit document.Testform.derButton.click() wird dort das Klicken das Buttons ohne Anwendereinwirkung bewerkstelligt. Der Aufruf der Methode ist in Seite window.setTimeout() mit einer Verzögerungszeit von 10000 Millisekunden, also 10 Sekunden, eingebettet.
Beim Klick auf den Button, egal ob durch den Anwender oder automatisch, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird eine andere Seite aufgerufen (Seite location.href).

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 focus()

Setzt den Cursor bzw. den Focus auf das betreffende Element. Erwartet keine Parameter.

Anwendbar auf: Seite Klick-Buttons Seite Checkboxen Seite Felder für Datei-Upload Seite Versteckte Elemente Seite Passwortfelder Seite Radio-Buttons Seite Abbrechen-Buttons Seite Absendebuttons Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder Seite Auswahllisten

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
<script type="text/javascript">
function Check () {
  if (document.Testform.Todesjahr.value != "1832") {
    alert("Sie wissen es einfach nicht!");
    document.Testform.Todesjahr.focus();
  } else {
    alert("Bravo!");
    window.location.href = "erfolg.htm";
  }
}
</script>
</head><body>
<form name="Testform" action="">
In welchem Jahr starb Goethe?<br>
<input type="text" size="6" name="Todesjahr">
<input type="button" value="Weiter" onclick="Check()">
</form>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular, in dem der Anwender das Todesjahr von Goethe eingeben soll. Wenn der Anwender auf den Button Weiter klickt, wird die Funktion Check() aufgerufen. Diese Funktion überprüft, ob in dem Eingabefeld für das Todesjahr der korrekte Wert steht. Abhängig davon wird entweder mit Seite alert() eine bissige Meldung ausgegeben, oder es wird "Bravo" ausgegeben und eine andere Seite aufgerufen (Seite location.href). Wenn der Anwender auf der Seite bleibt, weil die Eingabe fehlte oder falsch war, wird mit document.Testform.Todesjahr.focus() auf das Eingabefeld für das Todesjahr positioniert.

nach obennach unten

JavaScript 1.2Netscape 4.0 handleEvent()

Übergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie Seite handleEvent() beim window-Objekt (nähere Informationen siehe dort).

nach obennach unten

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 select()

Selektiert den gesamten in dem Feld enthaltenen Text. Erwartet keine Parameter.

Anwendbar auf: Seite Passwortfelder Seite einzeilige Eingabefelder Seite mehrzeilige Eingabefelder

Beispiel:

Beispiel-Seite Anzeigebeispiel: So sieht's aus

<html><head><title>Test</title>
</head><body>
<form name="Testform" action="">
Kopieren Sie den folgenden Code in die Adresszeile Ihres Browsers:<br>
<input type="text" size="40" name="Code" value="javascript:top.close()">
</form>
<script type="text/javascript">
document.Testform.Code.focus();
document.Testform.Code.select();
</script>
</body></html>

Erläuterung:

Das Beispiel enthält ein Formular mit einem einzigen Feld. Das Feld wird mit dem Wert "javascript:top.close()" vorbelegt (wohlgemerkt: das ist keine JavaScript-Anweisung, sondern nur ein Feldinhalt). Unterhalb des Formulars ist ein Script-Bereich notiert. Der Script-Bereich steht unterhalb, weil der darin enthaltene Code sofort ausgeführt und die Existenz des Formulars aber bereits voraussetzt. Dort wird zunächst mit document.Testform.Code.focus() auf das Formularfeld positioniert. Denn das Selektieren von Text ist nur möglich, wenn das Feld den Focus hat. Der vorbelegte Text des Formularfeldes wird dann mit document.Testform.Code.select() selektiert.

 nach oben
weiter Seite options
zurück Seite forms
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/javascript/objekte/elements.htm