当HTML输入框获得焦点时如何更改其边框颜色

Question

为了学习，我正在使用HTML、CSS和PHP制作登录注册系统。将会有不同的HTML文本框等内容。

我想要实现的是，当我在一个文本框中输入文字后，把光标移出并单击另一个文本框时，我希望第一个文本框的边框颜色变为绿色。

我知道如何通过CSS更改边框颜色，但我只想在发生这种事件时才这样做。任何帮助都将不胜感激。

- Ayush

---

请将您编写的用于实现此目标的代码发布。 - Akash Tomar

你可以在focusout事件中使用jQuery来附加一个CSS类，或者在原生JavaScript中使用blur事件。请参考https://codepen.io/Takumari85/pen/RaYwpJ。 - sujeet

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>

- random

Answer 2

你可以通过Jquery添加一个类，并在CSS中设置样式。当你尝试添加验证时，这也会帮助你，因为你只需更改类名即可显示红色边框以指示错误。

当你处于焦点状态时，你还可以添加一个类来显示多个状态的变化。

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

- V Mishra

Answer 3

here The code is :

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

input:focus {
  border-color: green;
}

<input type="text" />

- Priyesh Shah

---

这并没有回答问题 - OP想要在离开填充字段时更改边框。 - mplungjan

更好的做法是更改大纲样式，而不是更改边框，因为更改边框可能导致布局变化。 - Xesenix