javascript - 如何更改html输入的边框颜色

This question already has answers here:

:not(:empty) CSS selector is not working?
                                
                                    （9个答案）
                                
                        
                        
                            How to change form background color on focus loss when text is entered?
                                
                                    （2个答案）
                                
                        
                                6个月前关闭。
            
                    
为了学习，我在制作HTML，CSS和PHP的登录注册系统。将有不同的HTML文本框和内容。

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

我知道如何通过CSS更改边框颜色，但是我只想在发生此类事件时执行此操作。任何帮助将不胜感激。

最佳答案

将blur事件附加到input。

document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('blur', function() {
    this.classList.toggle('green', this.value.length > 0);
  });
});

.green {
    border: 2px solid green;
}

<input type="text">
<input type="text">
<button>Click Me</button>