Heim >Web-Frontend >js-Tutorial >Wie verwende ich JavaScript, um den Rand des Eingabefelds nach dem Ausfüllen zu ändern?

Wie verwende ich JavaScript, um den Rand des Eingabefelds nach dem Ausfüllen zu ändern?

王林nach vorne: 2023-09-09 19:37:021530Durchsuche

Die Eigenschaft

如何使用 JavaScript 填充输入框后更改输入框边框？

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.

Das

onchange-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.

Grammatik

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"

Parameter

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.

Rückgabewert

StyleBorder gibt einen String-Wert zurück, der die Farbe, Breite und den Stil des Elementrandes darstellt.

Schritte

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.

Beispiel

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>

Beispiel

Ändern Sie nur den unteren Rand des Eingabefelds

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>

Fazit

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!

JavaScript html NULL 字符串 double 继承值传递对象事件 dom border

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-Programm für die minimale Produktteilmenge eines ArraysNächster Artikel：JavaScript-Programm für die minimale Produktteilmenge eines Arrays

In Verbindung stehende Artikel

Mehr sehen