首頁 >web前端 >js教程 >如何使用 JavaScript 填滿輸入框後更改輸入框邊框？

如何使用 JavaScript 填滿輸入框後更改輸入框邊框？

王林轉載: 2023-09-09 19:37:021519瀏覽

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

style.border屬性用來改變元素的邊框，它會傳回元素的三個border-bottom屬性，即border-color、border-style和border -width 。它是 HTML 樣式物件屬性之一。

我們使用 onchange 事件使變更在填寫框後生效。 onchange 是 JavaScript 屬性之一，當 HTML 元素的值變更時就會發生。當選取狀態變更時，它還可以與單選按鈕和核取方塊一起使用。

onchange 事件也可以與

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

文法

以下是 style.border 屬性的語法，用於在填滿框後更改輸入框邊框 -

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

參數

width – 用來設定邊框寬度。我們可以將寬度值傳遞為「厚」、「薄」、「中」或以 px 為單位的值（即 10px）。
style – 用來設定邊框樣式。我們可以將樣式值傳遞為「solid」、「dotted」、「double」等。
color – 用於設定邊框顏色。
initial – 用於將屬性設為預設值。
inherit – 用於從父元素繼承屬性。

傳回值

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

步驟

填充框後，我們應該按照以下給出的步驟更改輸入框邊框 -

第 1 步 - 定義表單元素，其中包含文字和按鈕類型的輸入欄位。
步驟 2 - 腳本程式碼定義了填滿框後更改輸入框邊框的功能。
第 3 步 - 在 JavaScript 部分中，宣告了 onchange 事件，該事件在元素的值變更時發生。
步驟 4 - style.border 是 HTML DOM 背景屬性，用於變更底部邊框的元素。
步驟 5 - 每當使用者在輸入值上新增一些值時，就會觸發 onchange 事件，並且當觸發該事件時，該值會檢查它是否為 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>

範例

僅更改輸入框的下邊框

在本例中，我們使用樣式 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>

結論

在本文中，我們透過範例示範如何在填滿輸入框後變更輸入框的邊框。我們已經看到了棕褐色的範例，每當我們在兩個輸入欄位中輸入文字時，底部邊框就會更改為綠色。如果兩個輸入欄位中的值為空，則顏色不會改變，只有當該值存在時才會改變。

以上是如何使用 JavaScript 填滿輸入框後更改輸入框邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

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

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：數組最小乘積子集的 JavaScript 程序下一篇：數組最小乘積子集的 JavaScript 程序

看更多