Die Eigenschaft
style.border wird verwendet, um den Rand eines Elements zu ändern. Sie gibt die drei Randunterseiteneigenschaften des Elements zurück, nämlich border-color, border-style und border-width. Es handelt sich um eine der Objekteigenschaften im HTML-Stil.
Wir verwenden das Ereignis onchange, damit Änderungen nach dem Ausfüllen des Felds wirksam werden. onchange ist eines der JavaScript-Attribute, das auftritt, wenn sich der Wert eines HTML-Elements ändert. Es funktioniert auch mit Optionsfeldern und Kontrollkästchen, wenn sich der ausgewählte Status ändert.
Dasonchange-Event kann auch mit dem
In diesem Artikel erfahren Sie, wie Sie den Rahmen des Eingabefelds ändern, nachdem Sie es mit JavaScript gefüllt haben.
Das Folgende ist die Syntax der Eigenschaft style.border, um den Rand des Eingabefelds nach dem Ausfüllen des Felds zu ändern -
object.style.border = "width style color|initial|inherit"
width – wird verwendet, um die Rahmenbreite festzulegen. Wir können den Breitenwert als Dick, Dünn, Mittel oder als Wert in px (d. h. 10 px) übergeben.
style – wird zum Festlegen des Rahmenstils verwendet. Wir können Stilwerte als „solid“, „dotted“, „double“ usw. übergeben.
Farbe – wird zum Festlegen der Rahmenfarbe verwendet.
initial – wird verwendet, um eine Eigenschaft auf ihren Standardwert festzulegen.
inherit – wird verwendet, um Eigenschaften von übergeordneten Elementen zu erben.
StyleBorder gibt einen String-Wert zurück, der die Farbe, Breite und den Stil des Elementrandes darstellt.
Nachdem wir das Feld ausgefüllt haben, sollten wir die unten angegebenen Schritte befolgen, um den Rand des Eingabefelds zu ändern -
Schritt 1 – Definieren Sie das Formularelement mit Eingabefeldern vom Typ Text und Schaltfläche.
Schritt 2 – Der Skriptcode definiert die Funktion zum Ändern des Randes des Eingabefelds nach dem Ausfüllen des Felds.
Schritt 3 – Deklarieren Sie im Abschnitt „JavaScript“ das Ereignis „onchange“, das auftritt, wenn sich der Wert des Elements ändert.
Schritt 4 – style.border ist die HTML-DOM-Hintergrundeigenschaft, die zum Ändern des unteren Rands des Elements verwendet wird.
Schritt 5 – Immer wenn der Benutzer einen Wert zum Eingabewert hinzufügt, wird das onchange-Ereignis ausgelöst und wenn dieses Ereignis ausgelöst wird, wird überprüft, ob der Wert null ist. Wenn der Wert vorhanden und nicht leer ist, ändert sich der untere Rand des Rahmens in eine grüne gepunktete Linie.
Im folgenden Beispiel verwenden wir JavaScript, um den gefüllten Rand des ersten Eingabefelds in „10 Pixel durchgehend grün“ und den Rand des zweiten Eingabefelds in „3 Pixel gepunktetes Rot“ zu ändern.
<html>
<body style="text-align: center;">
<h2>Changing the Borders of Input Box after filling the Box</h2>
<!--defining the form-->
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.border = "10px solid green";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.border = "3px dotted red";
}
};
</script>
</body>
</html>
In diesem Beispiel verwenden wir die Eigenschaft „style borderBottom“, um den unteren Rand des Eingabefelds zu ändern. Damit Änderungen wirksam werden, verwenden wir das Ereignisattribut onchange.
<html>
<body style="text-align: center;">
<h2>Changing the bottom border of Input Box after filling the box</h2>
<form>
<label>First Name:</label>
<input type="text" id="firstname" name="firstname" value=""><br><br>
<label>Second Name:</label>
<input type="text" id="secondname" name="secondname" value=""><br><br>
<input type="button" value="submit">
</form>
<script>
var tp = document.getElementById("firstname");
var tp1 = document.getElementById("secondname");
tp.onchange = function (f) {
if (tp.value != '') {
f.target.style.borderBottom = "thick solid #00ff00";
}
};
tp1.onchange = function (g) {
if (tp1.value != '') {
g.target.style.borderBottom = "3px dotted green";
}
};
</script>
</body>
</html>
In diesem Artikel zeigen wir anhand eines Beispiels, wie man den Rand eines Eingabefelds nach dem Ausfüllen ändert. Wir haben das hellbraune Beispiel gesehen, bei dem der untere Rand immer dann grün wird, wenn wir in beide Eingabefelder Text eingeben. Die Farbe ändert sich nicht, wenn der Wert in beiden Eingabefeldern leer ist, sie ändert sich nur, wenn der Wert vorhanden ist.
Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um den Rand des Eingabefelds nach dem Ausfüllen zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
