Question

为了学习起见，我使用HTML，CSS和PHP制作了一个登录注册系统。将有不同的HTML文本框和内容。

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

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

Answer 1

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

Answer 2

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

您也可以在重点关注时添加一个类，以显示多个状态更改。

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

Answer 3

此处代码为：

input {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  outline: none;
  height: 25px;
  width: 150px;
}

input:focus {
  border-color: green;
}

<input type="text" />

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

3 个答案: