如何动态追加类

Question

自从我不得不使用 CSS 和 vanilla JavaScript 进行 DOM 操作已经有好几年了。

我有一个输入元素，一些默认 css 被添加到它的包装 div 中，而不是像这样的输入元素本身：

<div class="field animated-label text required">
 <label class="control-label" for="answer">Answer</label>
 <input class="form-control" />
</div>

所以这个输入元素的默认css是由这个选择器决定的：

.rds-form .animated-label {
  border: 2px solid #ccc;
  border-radius: 2px;
  color: #767676
  display: block;
  min-height: 40px;
  position: relative;
}

但是，当用户在没有输入任何内容的情况下单击输入元素时，会附加此选择器以在输入元素周围显示红色错误边框：

.rds-form .field-group.error, .rds-form
.field.text.error, .rds-form
.field.select.error, .rds-form .field.textarea.error {
  border: 2px solid #cc2233;
  position: relative;
}

这将如何在 JavaScript 中处理？我假设这是由一些 JavaScript 逻辑处理的。

Answer 1

向<input> 字段添加两个处理程序：

// When the input field has focus, remove the 'error' class from .animated-label:
document.querySelector('input').addEventListener('focus', function(e) {
    document.querySelector('.animated-label').classList.remove('error');
});

// When the input field loses focus, determine whether to add or remove the 'error' class:
document.querySelector('input').addEventListener('blur', function(e) {
    if (e.target.value.match(/^\s*$/)) { // Input is empty
        document.querySelector('.animated-label').classList.add('error');
    } else {
        document.querySelector('.animated-label').classList.remove('error');
    }
});