当输入中有文本时，如何切换元素上的类？

Question

我只是在学习 JavaScript，还没有找到解决这个问题的任何 vanilla JS 解决方案。我正在研究一个浮动标签表单组，其中输入的标签'隐藏'在输入后面。我希望它通过切换类“form-group-with-value”在输入中有文本时上升。 我不知道任何jQuery，我想避免它。 这是我的代码： P.S：当输入成为焦点时，我设法切换了一个类（以更改标签的颜色）。虽然它确实不是最好的解决方案，但它可以按原样工作。

//Dynamic Form Label
const input = document.querySelectorAll('.custom-input');
const formGroup = document.querySelectorAll('.form-group');

  //Toggle color when input is in focus
input[0].addEventListener('focus', () => formGroup[0].classList.toggle('form-group-with-focus') );
input[0].addEventListener('blur', () => formGroup[0].classList.toggle('form-group-with-focus') );

input[1].addEventListener('focus', () => formGroup[1].classList.toggle('form-group-with-focus') );
input[1].addEventListener('blur', () => formGroup[1].classList.toggle('form-group-with-focus') );

input[2].addEventListener('focus', () => formGroup[2].classList.toggle('form-group-with-focus') );
input[2].addEventListener('blur', () => formGroup[2].classList.toggle('form-group-with-focus') );

input[3].addEventListener('focus', () => formGroup[3].classList.toggle('form-group-with-focus') );
input[3].addEventListener('blur', () => formGroup[3].classList.toggle('form-group-with-focus') );


  //Toggle label position when input has value

.form-group{
    position: relative;
    min-height: 50px;
 
}
.form-group label{
    position: absolute;
    z-index: -1;
    transition: 0.3s;
    left: 5px;
}
.form-group-with-focus label{
    color: red;
}
.form-group-with-value label{
    transform: translateY(-80%);
}

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

请见谅，我是初学者

Answer 1

为了简化代码，您可以循环输入并生成单个事件处理程序而不是多个。另外，您可以调用输入的父节点来切换类。

另外，如果您只想让标签显示输入是否有值，您不想切换。

我选择了input 事件，因为它涵盖了粘贴和键盘输入。

//Dynamic Form Label
const input = document.querySelectorAll('.custom-input');

input.forEach(function(el) {
  el.addEventListener('input', function(e) {
    if (e.target.value == "") {
      e.target.parentNode.classList.remove('form-group-with-value')
    } else {
      e.target.parentNode.classList.add('form-group-with-value')
    }

  });
});

.form-group {
  position: relative;
  min-height: 50px;
}

.form-group label {
  position: absolute;
  z-index: -1;
  transition: 0.3s;
  left: 5px;
}

.form-group-with-focus label {
  color: red;
}

.form-group-with-value label {
  transform: translateY(-80%);
}

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

<div class="form-group ">
  <label>Full Name</label>
  <input type="text" class="form-control custom-input" id="name" placeholder="Full Name">
</div>

Answer 2

如果您希望在用户输入时调用某些 JS/Function，可以使用keyPress 或keyUp 事件。