style.border屬性用于改變元素的邊框，它返回元素的三個border-bottom屬性，即border-color、border-style和border-width 。它是 HTML 樣式對象屬性之一。
我們使用 onchange 事件使更改在填寫框后生效。 onchange 是 JavaScript 屬性之一，當 HTML 元素的值發生更改時就會發生。當選中狀態更改時，它還可以與單選按鈕和復選框一起使用。
onchange 事件還可以與 HTML 元素一起使用。 onchange 事件與 oninput 事件非常相似。但是 oninput 事件在元素的值更改后立即發生，而 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 填充輸入框后更改輸入框邊框？的詳細內容，更多請關注www.92cms.cn其它相關文章！
