如何使用 JavaScript 填充輸入框后更改輸入框邊框？-魔扣目錄

style.border屬性用于改變元素的邊框，它返回元素的三個border-bottom屬性，即border-color、border-style和border-width 。它是 HTML 樣式對象屬性之一。

我們使用 onchange 事件使更改在填寫框后生效。 onchange 是 JavaScript 屬性之一，當(dāng) HTML 元素的值發(fā)生更改時就會發(fā)生。當(dāng)選中狀態(tài)更改時，它還可以與單選按鈕和復(fù)選框一起使用。

onchange 事件還可以與 HTML 元素一起使用。 onchange 事件與 oninput 事件非常相似。但是 oninput 事件在元素的值更改后立即發(fā)生，而 onchange 事件在元素失去焦點時發(fā)生。

在本文中，我們將了解如何在使用 JavaScript 填充輸入框后更改輸入框邊框。

語法

以下是 style.border 屬性的語法，用于在填充框后更改輸入框邊框 –

object.style.border = "width style color|initial|inherit"

登錄后復(fù)制

參數(shù)

width – 用于設(shè)置邊框?qū)挾取Ｎ覀兛梢詫挾戎祩鬟f為“厚”、“薄”、“中”或以 px 為單位的值（即 10px）。

style – 用于設(shè)置邊框樣式。我們可以將樣式值傳遞為“solid”、“dotted”、“double”等。

color – 用于設(shè)置邊框顏色。

initial – 用于將屬性設(shè)置為默認(rèn)值。

inherit – 用于從父元素繼承屬性。

返回值

樣式邊框返回一個字符串值，該值代表元素邊框的顏色、寬度和樣式。

步驟

填充框后，我們應(yīng)該按照以下給出的步驟更改輸入框邊框 –

第 1 步 – 定義表單元素，其中包含文本和按鈕類型的輸入字段。

步驟 2 – 腳本代碼定義了填充框后更改輸入框邊框的功能。

第 3 步 – 在 JavaScript 部分中，聲明了 onchange 事件，該事件在元素的值更改時發(fā)生。

步驟 4 – style.border 是 HTML DOM 背景屬性，用于更改底部邊框的元素。

步驟 5 – 每當(dāng)用戶向輸入值添加一些值時，就會觸發(fā) onchange 事件，并且當(dāng)觸發(fā)該事件時，該值會檢查它是否為 null。如果該值存在且不為空，則邊框底部將更改為綠色點線。

示例

在下面的示例中，我們使用 JavaScript 將第一個輸入框填充后的邊框更改為“10px 純綠色”，將第二個輸入框邊框更改為“3px 點狀紅色”。

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

登錄后復(fù)制

示例

僅更改輸入框的下邊框

在本例中，我們使用樣式 borderBottom 屬性來更改輸入框的下邊框。為了使更改生效，我們使用 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>

登錄后復(fù)制