当用户开始使用 javascript ， html 和 css 在输入字段中输入时，如何制作完整的表单，其中按钮的背景颜色会发生变化？

Question

const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");

inputfield.addEventListener("keyup", function(e) {
  const val = e.target.value;
  if (val === "") {
    btn.disabled = true;
    btn.style.backgroundColor = "grey";
  } else {
    btn.disabled = false;
    btn.style.backgroundColor = "orange";
  }
})

<div class="container">
  <input id="username" placeholder="Username" class="input" />
  <button disabled id="btn" type="button" class="button">Submit</button>
</div>

现在的问题是它只适用于一个输入和关联的按钮字段它不适用于另一对输入字段和按钮，所以我应该在上面的 javascript 代码中做些什么更改，它可以运行我想要的输入字段和按钮？

请任何人帮助我解决这个问题。谢谢

如果您有完整的 jquery 代码，它也被接受。

Answer 1

只需将其包装到一个额外的 div 元素中并迭代槽即可。对于每个“input-group”，您可以将事件侦听器添加到输入子项并编辑按钮子项的样式。

document.querySelectorAll('.input-group').forEach((group) => {
  let input = group.querySelector('input');
  let button = group.querySelector('button');
  input.addEventListener('keyup', () => {
    if(input.value !== "") {
      button.disabled = false; 
    } else {
      button.disabled = true;
    }
  });
});

#btn[disabled] {
  background: red;
}

#btn {
  background: green;
}

<div class="container">
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="input-group">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
</div>

Answer 2

我的方法是将输入和按钮放在 div 中，自定义 class。只需遍历每个 div，获取子输入和按钮，然后对每个 div.

使用现有代码

const btns = document.getElementsByClassName('inputButton');

for (let i = 0; i < btns.length; i++) {
  let input = btns[i].querySelector('input');
  let button = btns[i].querySelector('button');

  input.addEventListener("keyup", function(e) {
    const val = e.target.value;
    if (val === "") {
      button.disabled = true;
      button.style.backgroundColor = "grey";
    } else {
      button.disabled = false;
      button.style.backgroundColor = "orange";
    }
  });
}

<div class="container">
  <div class="inputButton">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
  <div class="inputButton">
    <input id="username" placeholder="Username" class="input" />
    <button disabled id="btn" type="button" class="button">Submit</button>
  </div>
</div>

Answer 3

您可以使用 class 进行循环，以将事件侦听器添加到您想要的每个输入。您可以使用 data-whateverYouWant 到 link 按钮来输入另外，应该让你的风格在 css.

let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("keyup", function(e) {
    let btn  = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
    if (this.value === "") {
      btn.disabled = true;
    } else {
      btn.disabled = false;
    }
 })
}

button{
  background-color:orange;
}
button:disabled,
button[disabled]{
  background-color:grey;
}

<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>

<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>

当用户开始使用 javascript ， html 和 css 在输入字段中输入时，如何制作完整的表单，其中按钮的背景颜色会发生变化？

How to make complete form in which background color of button changes when user starts typing in input field with javascript , html and css?

html

javascript

css

jquery

event-handling