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

在本文中，我们将在输入文本字段上填写文本后更改输入边框。当元素的值发生更改并从列表中选择新值时，onchange事件属性会起作用。

方法： 当用户输入某个值时，onchange事件属性会触发。事件触发后，会检查值是否不为空。如果存在用户值，则使用内联样式将输入控制的底部边框更改为虚线红色。

语法：

<element onchange = "script">

示例： 在这个示例中，当用户在输入框中输入文本时，我们将更改border-bottom样式。

<body style="text-align: center;"> 
    <h2>GeeksForGeeks</h2> 
  
    <h2> 
        Change input 
        borders after filling data 
    </h2> 
  
    <form> 
        <label> NAME</label> 
        <input type="text" id="fname" name="fname" value=""> 
        <input type="submit" value="submit"> 
    </form> 
  
    <script> 
        var gfg = document.getElementById("fname"); 
          
          gfg.onchange = function (e) { 
            if (gfg.value != '') { 
                e.target.style.borderBottom 
                        = "4px dotted red"; 
            } 
        }; 
    </script> 
</body>

输出：

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