Manche nennen es Magie – die Fähigkeit, Objekte plötzlich aus dem Nichts erscheinen zu lassen. Sie können diese Art von Magie auf Ihrer Website mit ein paar Zeilen JavaScript erstellen. Textfelder sind beispielsweise gute HTML-Elemente, die Sie verwenden können, um zu lernen, wie Objekte dynamisch angezeigt werden. Anstatt sie beim Entwerfen Ihrer Webseite in Ihren Code zu integrieren, fügen Sie nach Bedarf Textfelder hinzu und beeindrucken Sie gleichzeitig die Besucher der Website.
Textfelderstellung
Bevor Sie ein Textfeld erstellen, müssen Sie verstehen, was ein Textfeld ist. HTML kennt es als Eingabe-Tag, wie im folgenden Beispiel gezeigt:
Dieses Eingabe-Tag erstellt ein Textfeld mit zwei wichtigen Attributen. ID und Typ. Das type-Attribut, dessen Wert „text“ ist, weist die Browser an, ein Textfeld anstelle eines anderen Steuerelementtyps wie einer Schaltfläche zu erstellen. Das optionale ID-Attribut kann nützlich sein, wenn Sie das Textfeld später bearbeiten müssen. Die Wertoption, die ebenfalls optional ist, enthält den Wert, den Sie beim Öffnen der Webseite im Textfeld sehen möchten.
Dynamische Textfelder
HTML ist es egal, wenn Sie die Attribute eines Elements definieren, solange Sie ihnen irgendwo Werte geben. Dies bedeutet, dass Sie ein Textfeldelement dynamisch erstellen und seine Attribute jederzeit festlegen können. Die Funktion document.createElement ermöglicht dies wie folgt:
var box = document.createElement („Eingabe“);
Das ist alles, was Sie brauchen, um ein HTML-Eingabeelement zu erstellen und es einer Variablen mit dem Namen „box“ zuzuweisen. Das Box-Objekt wird erst dann zu einem Textfeld, wenn Sie seinem Typattribut den Wert „text“ geben, wie in diesem Beispiel gezeigt:
box.type = „text“;
Webseitenintegration
Mit dem folgenden Code wird das Textfeld an das HTML-Dokument angehängt. Verwenden Sie dazu die nützliche Funktion appendChild:
document.body.appendChild (Feld);
Wenn Sie das Textfeld nach einem bestimmten Steuerelement anhängen möchten, verwenden Sie stattdessen die folgende Anweisung:
document.getElementById („some_Element_ID“). appendChild (box);
Ersetzen Sie „some_Element_ID“ durch den Namen des Elements, nach dem Sie das Textfeld anhängen möchten. Wenn dieses Element beispielsweise eine Schaltfläche mit der ID „button1“ wäre, würde die appendChild-Anweisung wie folgt aussehen:
document.getElementById („button1“). appendChild (box);
Optionale Attribute
Ihr neues Textfeld funktioniert mit diesem Code einwandfrei. Erstellen Sie einfach eine JavaScript-Funktion, die die Anweisung enthält, und rufen Sie sie auf, wann immer Sie ein Textfeld benötigen. Sie können den Wert und die ID-Attribute des Textfelds jedoch auch wie folgt festlegen:
box.value = boxValue; box.id = boxID;
Übergeben Sie die Werte von boxValue und boxID an die Funktion, und diese Attribute werden auf das Textfeld angewendet. Wenn Sie einen ID-Wert zuweisen, können Sie ihn später verwenden, um die Eigenschaften des Textfelds zu aktualisieren, wie im folgenden Beispiel gezeigt:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = „rot“;
Die erste Anweisung erhält einen Verweis auf das Textfeld und die letzte Anweisung ändert die Hintergrundfarbe des Textfelds in Rot.