JavaScript 在用户填写或不填写文本字段失去焦点时更改文本字段答案

【问题标题】：JavaScript Change the text fields when the user fills or not when the text field loses focusJavaScript 在用户填写或不填写文本字段失去焦点时更改文本字段
【发布时间】：2021-07-29 01:48:09
【问题描述】：

我在作业方面需要帮助：当用户填写文本字段并且文本字段失去焦点时，将文本字段设为绿色并带有复选标记。您可以使用 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>

【问题讨论】：

请分享你试过的JS代码。
让 fields = document.getElementsByTagName("input"); const checkFields = function () { for (let i = 0; i

标签： javascript css dom

【解决方案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>

【讨论】：

一切都很好，除了输入字段如果一旦选择后没有输入任何值就应该是红色的。只有在输入 smth 然后从所选字段中删除时，此代码才有效。

【解决方案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"
 })
)

【讨论】：