Javascript 如何更改输入时html的边框颜色

为了学习，我正在用HTML、CSS和PHP制作一个登录注册系统。会有不同的HTML文本框和东西

我想实现的是，当我在一个文本框中写入内容，然后取出光标并单击另一个文本框时，我想将第一个文本框的边框颜色更改为绿色。

---

我知道如何通过CSS更改边框颜色，但我只想在发生此类事件时这样做。非常感谢您的帮助。

将

blur

事件附加到

输入

document.querySelectorAll（'input'）.forEach（（input）=>{
input.addEventListener（'blur'，function（）{
this.classList.toggle（'green'，this.value.length>0）；
});
});
.green{
边框：2倍纯绿；
}

单击我
将
模糊
事件附加到
输入


document.querySelectorAll（'input'）.forEach（（input）=>{
input.addEventListener（'blur'，function（）{
this.classList.toggle（'green'，this.value.length>0）；
});
});
.green{
边框：2倍纯绿；
}

单击我这里的代码是：
输入{
边框：1px实心#ccc；
边界半径：5px；
填充物：5px；
大纲：无；
高度：25px；
宽度：150px；
}
输入：焦点{
边框颜色：绿色；
}
这里的代码是：
输入{
边框：1px实心#ccc；
边界半径：5px；
填充物：5px；
大纲：无；
高度：25px；
宽度：150px；
}
输入：焦点{
边框颜色：绿色；
}
您可以通过Jquery添加一个类，并以CSS给出样式。当您稍后尝试添加验证时，它也将帮助您，然后您可以更改显示红色边框的类名以指示错误

您还可以在处于焦点时添加一个类，以显示您的多个状态更改

$(document).ready(function($) {
    $(".text").focus(function(){
       $(this).addClass("Yellow");
    }).blur(function(){
       $(this).addClass("success");
    })
});

您可以通过Jquery添加一个类，并在CSS中提供样式。当您稍后尝试添加验证时，它也将帮助您，然后您可以更改显示红色边框的类名以指示错误

您还可以在处于焦点时添加一个类，以显示您的多个状态更改

$(document).ready(function($) {
    $(".text").focus(function(){
       $(this).addClass("Yellow");
    }).blur(function(){
       $(this).addClass("success");
    })
});

请发布您为实现此目的而编写的代码。在vanilla javascript
blur
事件中，您在jQuery的
focusout
上附加了一个css类。请参见，发布您为实现此目的而编写的代码。在vanilla javascript
blur
事件中，您在jQuery的
focusout
上附加了一个css类。请参见不回答问题-OP希望在离开填充字段时更改边框更好的做法是更改轮廓样式，因为更改边框可能会导致布局更改，而这不会回答问题-OP希望在离开填充字段时更改边框更好的做法是将轮廓样式更改为更改边框可能会导致布局更改