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

style.border属性用于更改元素的边框，它返回元素的三个border-bottom属性：border-color、border-style和border-width。它是HTML样式对象的属性之一。

我们使用onchange事件在填充框后使更改生效。onchange是JavaScript属性之一，当HTML元素的值发生改变时触发。它也适用于单选按钮和复选框，在选中状态改变时触发。

onchange事件也可以与<select> HTML元素一起使用。onchange事件与oninput事件非常相似。但是oninput事件在元素值改变后立即触发，而onchange事件在元素失去焦点时触发。

在本文中，我们将看到如何在填充输入框后使用JavaScript更改输入框的边框。

语法

以下是使用style.border属性在填充输入框后更改输入框边框的语法：

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

参数

width – 用于设置边框宽度。可以传递以下值：’thick’, ‘thin’, ‘medium’或像素值（例如：10px）。
style – 用于设置边框样式。可以传递以下值：’solid’, ‘dotted’, ‘double’等。
color – 用于设置边框颜色。
initial – 将属性设置为默认值。
inherit – 用于从父元素继承属性。

返回值

样式边框返回一个字符串值，表示元素边框的颜色、宽度和样式。

步骤

按照下面给定的步骤来改变填充输入框后的边框：

步骤1 - 定义包含文本输入字段和按钮类型的表单元素。
步骤2 - 定义脚本代码，用于改变填充输入框后的边框功能。
步骤3 - 在JavaScript部分声明onchange事件，该事件在元素的值更改时发生。
步骤4 - style.border是HTML DOM背景属性，用于改变元素的底部边框。
步骤5 - 每当用户向输入值添加一些值时，onchange事件将被触发，当事件触发时，值将检查是否为null。如果值存在且不为null，则将底边的边框更改为点状绿色。

示例

在下面的示例中，我们使用JavaScript将第一个输入框的边框填充为”10px solid green”，第二个输入框的边框填充为”3px dotted red”。

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

示例

仅更改输入框的底部边框

在这个示例中，我们使用style的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>