成为VIP如何使用 JavaScript 填充输入框后更改输入框边框？
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 填充输入框后更改输入框边框？的详细内容，更多请关注双恒网络其它相关文章！
