document.QuerySelector返回文档中与特定选择器匹配的第一个元素。

以便仅在第一个输入上应用AddEventListener。

要获取所有匹配的元素，需要使用Document.QuerySelectorAll。

null

document.querySelectorAll('.input-group .form-input').forEach((item) => {
  item.addEventListener('input', shrinkLabel);
});

function shrinkLabel(e) {
  const input = e.target,
    label = input.nextElementSibling;

  if (input.value.length > 0) {
    label.classList.add('shrink');
  } else {
    label.classList.remove('shrink');
  }
}

.input-group {
  position: relative;
  margin: 1rem 0;
}

.input-group .form-input {
  display: block;
  background: none;
  background-color: #fff;
  color: #202124;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  padding: 13px 15px;
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin: 0;
}

.input-group .form-input:focus {
  outline: none;
  border-color: #d80810;
}

.input-group .form-input:focus ~ .form-input-label {
  font-size: 14px;
  top: -12px;
  color: #d80810;
}

.input-group .form-input-label {
  background: #fff;
  color: #80868b;
  font-size: 16px;
  position: absolute;
  pointer-events: none;
  padding: 0 7px;
  left: 8px;
  top: 15px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.input-group .form-input-label.shrink {
  font-size: 14px;
  top: -12px;
  color: #d80810;
}

<div class="input-group mb-4">
  <input
    type="text"
    name="username"
    value=""
    id="username"
    class="form-input"
  />
  <label for="username" class="form-input-label">Username</label>
</div>
<div class="input-group">
  <input
    type="password"
    name="password"
    value=""
    id="password"
    class="form-input"
  />
  <label for="password" class="form-input-label">Password</label>
</div>

document.querySelectorAll('.input-group .form-input').forEach(item => {
  item.addEventListener('input', shrinkLabel);
});

.QuerySelectorAll应该在这里工作！

使用Document.QuerySelectorAll()。然后，您需要使用foreach循环添加事件侦听器。

这个例子来自这篇MDN文章

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function(userItem) {
  deleteUser(userItem);
});