JavaScript 在用戶填寫或不填寫文本字段時更改文本字段

Question

我需要一項作業的幫助：當用戶填寫文本字段並且文本字段失去焦點時，用復選標記將文本字段設為綠色。 您可以使用 FontAwesome 中的復選標記。 當用戶未填寫文本字段但移除焦點時，將文本字段設為紅色並帶有叉號 我需要 javascript/dom 代碼來完成此任務。 我試過這段代碼但不起作用：

    let fields = document.getElementsByTagName("input");
const checkFields = function () {
    for (let i = 0; i < fields.length; i++) {
        if (fields[i].value == "") {
          fields[i].style.backgroundColor = "red";
        } else {
          fields[i].style.backgroundColor = "green";
        }
      }
}
fields.addEventListener('change', checkFields)



          <div class="controls">
            <input
              autofocus=""
              class="input-xlarge"
              id="company"
              name="company"
              placeholder="Company name"
              type="text"
              value=""
            />
          </div>
        </section>

        <section class="control-group">
          <label class="control-label" for="fname">Name</label>

          <div class="controls two-col">
            <input
              class="input-medium"
              id="fname"
              name="fname"
              placeholder="First name"
              type="text"
              value=""
            />
          </div>

          <div class="controls two-col">
            <input
              class="input-medium"
              id="lname"
              name="lname"
              placeholder="Last name"
              type="text"
              value=""
            />
          </div>
        </section>

        <section class="control-group">
          <label class="control-label" for="email">Email</label>

          <div class="controls">
            <input
              class="input-xlarge"
              id="email"
              name="email"
              placeholder="Email"
              type="email"
              value=""
            />
          </div>
        </section>

Answer 1

這是您的解決方案：

 // Select Each Input document.querySelectorAll('input').forEach((inp) => { // Remove whitespace from value and check it // Add eventlistener on each input inp.addEventListener('change', () => { let value = inp.value.split(' ').join('') // Do something with value; if (value == "") { inp.style.backgroundColor = "red"; } else { inp.style.backgroundColor = "green"; } }) })

 <section> <div class="controls"> <input autofocus="" class="input-xlarge" id="company" name="company" placeholder="Company name" type="text" value="" /> </div> </section> <section class="control-group"> <label class="control-label" for="fname">Name</label> <div class="controls two-col"> <input class="input-medium" id="fname" name="fname" placeholder="First name" type="text" value="" /> </div> <div class="controls two-col"> <input class="input-medium" id="lname" name="lname" placeholder="Last name" type="text" value="" /> </div> </section> <section class="control-group"> <label class="control-label" for="email">Email</label> <div class="controls"> <input class="input-xlarge" id="email" name="email" placeholder="Email" type="email" value="" /> </div> </section>

Answer 2

您可以使用“focusout”事件，如果我正確理解您的問題，我相信這將是更好的選擇。

const ips = document.querySelectorAll("input")

ips.forEach(ip=>ip.addEventListener("focusout", ()=>{
    const text = ip.value
    if (text === "") ip.style.border= "1px solid red"
    else ip.style.border = "1px solid green"
 })
)