如何在纯javascript中更改输入焦点上的标签颜色？ [复制]

Question

我在绝对位置的 div 中有两个输入框。以及这些输入框上的标签。我想要的效果是当我聚焦一个输入框时，标签应该是蓝色的，当模糊时应该删除类（蓝色）。同时还有其他标签和输入框。

// Initial color of label
label.labels{
  color: black;
}

input.box{
  border-width: 0 0 2px 0;
  outline: none;
}

<div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class = "labels">First Name:</label>
  <input type = "text" class = "box" /><br />
  <label class = "labels">Last Name:</label>
  <input type = "text" class = "box" />
</div>

当我关注 input.box 时，label.labels 颜色应该是蓝色的。是的，输入和标签都有相同的类。如何用纯 Javascript 实现这种效果？或者如果可能，请告诉我如何使用 css 实现这一目标？

Answer 1

这是一个使用纯 Javascript 的解决方案：

function toggleClass() {
  this.previousElementSibling.classList.toggle('imblue');
}

var inputs = document.getElementsByClassName('box');

for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];

  input.addEventListener('focus', toggleClass);
  input.addEventListener('blur', toggleClass);
}

label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.imblue {
  color: blue !important;
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <label class="labels">First Name:</label>
  <input type="text" class="box" /><br />
  <label class="labels">Last Name:</label>
  <input type="text" class="box" />
</div>

Answer 2

使用 :focus-within 伪元素的 css 解决方案。请注意，IE / Edge 不支持此功能。

您需要包装每个 label 和 input 对才能使其工作。

// Initial color of label
label.labels {
  color: black;
}

input.box {
  border-width: 0 0 2px 0;
  outline: none;
}

.field:focus-within .labels {
  color: blue;
}

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <div class="field">
    <label class="labels">First Name:</label>
    <input type="text" class="box" /><br />
  </div>
  <div class="field">
    <label class="labels">Last Name:</label>
    <input type="text" class="box" />
  </div>
</div>