HTML5 DOM -Eingabettext StandardValue -Eigenschaft

Oft müssen wir den Standardwert des Textfelds herausfinden. Da. Die Eigenschaft StandardValue -Eigenschaft gibt den Standardwert des Textfelds an oder gibt es zurück. In HTML wird der Standardwert als der “angegebenWert”Attribut.

Dieser Beitrag wird demonstrieren:

• Was ist der Unterschied zwischen DefaultValue und Value -Eigenschaften?
• So zeigen Sie den Standardwert des Eingabeelements an?
• So zeigen Sie den aktuellen Wert des Eingangsfeldes an?

Was ist der Unterschied zwischen DefaultValue und Value -Eigenschaften?

Der "Wert" Und "StandardwertDie Eigenschaften unterscheiden sich so, dass die Standard -Value -Eigenschaft den Standardwert des Eingangsfeldes hält. Im Gegensatz dazu hält die Werteigenschaft den aktuellen Wert nach den Änderungen.

So zeigen Sie den Standardwert des Eingabeelements in HTML an?

So zeigen Sie den Standardwert des Eingabeelements an “anStandardwertEigenschaft wird in JavaScript verwendet. Schauen wir uns an, dass es mit Hilfe eines Beispiels funktioniert.

Beispiel:
Erstellen Sie zunächst ein DIV -Element mit dem Klassennamen “Inhalt”In der HTML -Datei. Fügen Sie ein weiteres Div mit dem Klassennamen hinzu “UnterkontentIn diesem Element. Geben Sie dann eine Bildunterschrift in das Textfeld an und fügen Sie ein Element hinzu, das dem Attribut zugeordnet istfür"Den Wert haben"Name”. Platzieren Sie in diesem Etikettelement das Eingabeelement mit Attributen:

• Typ: Es gibt den Eingabefeldentyp an, z. B. Text, Kontrollkästchen, Radio oder mehr.
• Ausweis: Es gibt die eindeutige ID an, die in CSS oder JavaScript zur Manipulation verwendet wird.
• Wert: Es gibt einen Wert an und assoziiert ihn mit der ID des Eingangsfeldes

Dann füge hinzu

Element zum Hinzufügen von Inhalten zur Webseite. Geben Sie danach ein Schaltflächenelement mit den Attributen an “Typ"Mit dem Wert"einreichen" Und "ONCLICK”Attribut mit dem Wert“ShowValue ()”. Diese Funktion wird in JavaScript definiert. Zum Schluss, um den Standardwert zu sehen, geben Sie eine an

Element als Inline-Block-Element gestaltet. Das Span -Element mit der ID “d_val”Zeigt den Standardwert an:

Name:

Klicken Sie hier, um die Werte anzuzeigen

Klicken

Der Standardwert:

Gehen Sie nun in den Abschnitt JavaScript, in dem eine Funktion definiert wird, die das enthält “Standardwert" Eigentum.

JavaScript

Der Funktionsname “ShowValue ()"Folgt das Schlüsselwort"Funktion”. In dieser Funktion schreiben wir einen Codeblock, um die Aufgabe anzugeben:

• var inputDefault: Erstellen Sie eine Variable “inputDefault"Verwenden des Schlüsselworts"var”.
• dokumentieren.GetElementById ("Name").Standardwert: Weisen Sie den Standardwert des Eingangsfeldes mit der Verwendung der “zuStandardwertEigenschaft zu der oben erstellten Variablen.
• Um den Wert der Variablen in das HTML -Span -Element mit der ID D_VALUE einzubetten, geben Sie den Code ein “dokumentieren.GetElementById ("D_VALUE").Innerhtml”. Weisen Sie dann den variablen Wert ihm zu.

Der nächste Abschnitt zeigt das CSS -Styling.

Stil „alle“ Elemente

*
Rand: 0;
Polsterung: 0;
Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;

Um alle HTML -Elemente zu stylen, wenden Sie diese Eigenschaften an:

• “RandEigenschaft fügt Platz um das Element um.
• “PolsterungDie Eigenschaft fügt Platz um den Inhalt des Elements oder innerhalb des Randes hinzu.
• “Schriftfamilie"Eigenschaft wird mit den Werten festgelegt"Verdana, Genf, Tahoma, Sans-Serif”. Diese Liste wird bereitgestellt, um sicherzustellen, dass wenn der Browser den ersten Wert nicht unterstützt, eine andere Schriftart angewendet wird.

Stil „Inhalt“ div

.Inhalt
Grenze: 1PX Solid #F8C4C4;
Breite: 400px;
Polsterung: 20px;
Rand: 40px Auto;
Grenzradius: 12px;
Hintergrundfarbe: Antiquewhite;

Das Divelelement mit der Klasse “Inhalt”Wird mit diesen CSS -Eigenschaften angewendet:

• “GrenzeImmobilien werden verwendet, um einen Rand um das Element mit der Grenzbreite, dem Grenzstil und der Farbe anzuwenden.
• “BreiteEigenschaft legt die Breite des Elements fest.
• “GrenzradiusDie Eigenschaft wird die Kanten des Elements rund machen.
• “HintergrundfarbeEigenschaft gibt die Hintergrundfarbe des Elements an.

Stil „Unterkontent“ div

.Unterkontent
Breite: 500px;
Höhe: 150px;

Stil „Eingabe“ Element

.Eingabe von Unterkontents
Polsterung: 3px;
Border-Radius: 5px;
Schriftgröße: 16px;

Das Eingangsfeld ist mit diesen Eigenschaften gestaltet:

• “SchriftgrößeDie Eigenschaft wird für die Einstellung der Schriftgröße des Elements verwendet.

Stil „Button“ Element

Taste
Hintergrundfarbe: Brown;
Polsterung: 8px 20px;
Farbe: #ffffff;
Grenze: 1PX Solid #ffd5d5;
Border-Radius: 6PX;
Schriftgröße: 14px;
Rand: 5px 100px;
Box-Shadow: 1px 1px 2px 1px grau;

Das Tastenelement wird mit den folgenden CSS -Eigenschaften gestaltet:

• “FarbeDie Eigenschaft legt die Textfarbe des Elements fest.
• “Box SchattenEigentum ist eine Kurzeigenschaft, um das Element um einen Schatten hinzuzufügen. Es gibt den X-Offset, den Y-Offset, den Unschärferadius, den Spread-Radius und die Farbe des Schattens an.

Stylen Sie den „Knopf“ im Schweber

Taste: Hover
Transformation: Translatey (2px);
Cursor: Zeiger;

Bei schweber Schwebungen werden die Button -Elemente mit diesen Eigenschaften gestaltet:

• “verwandelnEigenschaft wird für die Transformation des Elements verwendet. Der Wert "Translatey (2px)”Zieht die Taste auf die y-Achse um.
• “Mauszeiger”Eigenschaft mit dem Wert“Zeiger”Ändert den Mauszeiger mit einem zeigenden Finger in eine Hand.

Es kann beobachtet werden, dass der in dem Feld eingegebene Eingangswert ist “John", Während der Standardwert ist"Gänseblümchen”:

So zeigen Sie den aktuellen Wert des Eingangsfeldes an?

Um den aktuellen/gegenwärtigen Wert des Eingangsfeldes anzuzeigen, gehen Sie zunächst zur HTML -Datei. Ergänzen Sie die

Element, das dem Style -Attribut mit dem “zugeordnet istAnzeige”Eigenschaft mit dem Wert“Eingabeblock”. Fügen Sie dann ein Span -Element hinzu, das mit dem angegeben istval" Ausweis:

Der aktuelle Wert:

Fügen Sie danach den folgenden Code in JavaScript hinzu:

var InputCurrent = Dokument.GetElementById ("Name").Wert;
dokumentieren.GetElementById ("Val").Innerhtml = InputCurrent;

• Erstellen Sie zunächst eine Variable “Eingangsstrom"Mit dem Schlüsselwort"var”.
• Um den vorhandenen Wert des Eingangsfeldes in die Variable zu speichern, geben Sie an “dokumentieren.GetElementById ("Name").Wert”. Hier hält die Value -Eigenschaft den aktuellen Wert des Feldes.
• Um den Wert in das Span -Element mit ID einzubetten “valIn HTML geben Sie die Funktion an “dokumentieren.GetElementById ("Val").Innerhtml”. Zuweisen Sie dann den Wert der “Eingangsstrom”Variabel dazu.

Wie Sie sehen können, zeigt das erste Element den Standardwert an, während das zweite

Das Element zeigt den aktuellen Wert:

Das drehte sich um den Wert des Standard- und aktuellen Eingabefelders.

Abschluss

Der "StandardwertEigenschaft enthält den Standardwert des Eingabefeldes. Diese Eigenschaft wird verwendet, um den Standardwert des Eingangsfeldes festzulegen oder zurückzugeben. In HTML die “WertDie Eigenschaft legt einen neuen Wert fest, der in das Feld eingegeben wird. In diesem Blog wurde der HTML5 DOM -Eingabettext defaultValue und die Werteigenschaft mit geeigneten Beispielen erläutert.