擦除输入内容后，表单中的必填字段不会变为红色

Question

基本表单验证

在这道题中，您要确保文本框不为空。完成以下步骤：

创建一个文本输入框。编写一个函数，如果文本框为空，则将文本框的边框变为红色。

(为"")为空

如果值不为空，边框应该恢复正常。

当用户释放一个键 (onkeyup) 时，运行您刚刚创建的函数。

请更正我编码错误的代码？

let form = document.getElementById("form_Text").value;
document.getElementById("form_Text").onfocus = function() {
  if (form == "") {
    document.getElementById("form_Text").style.backgroundColor = "red";
    document.getElementById("showText").innerHTML = "Form is empty";
  } else {}
  document.getElementById("form_Text").onkeyup = function() {
    document.getElementById("form_Text").style.backgroundColor = "white";
    document.getElementById("showText").innerHTML =
      "Form is not Empty, No red Background";
  };
};

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

Answer 1

您正在尝试在加载 js 后立即使用 let form = document.getElementById("form_Text").value; 获取输入值。因此它永远是空的。您需要在事件侦听器中调用它。

document.getElementById("form_Text").onfocus = function() {
    let form = document.getElementById("form_Text").value;
    ...
}

但是您可以使用 input 事件代替 focus 和 keyup

而不是编写两个单独的事件侦听器

   
const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");

formText.addEventListener('input', function(evt) {
  const inputValue = evt.target.value;

  if (inputValue == '') {
    formText.style.backgroundColor = "red";
    showText.innerHTML = "Form is empty";
  } else {
    formText.style.backgroundColor = "white";
    showText.innerHTML = "Form is not Empty, No red Background";
  }
})

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

更新

您可以在下面找到其他绑定方式。您可以使用 oninput 事件侦听器，而不是使用两个单独的事件（keyup 和 focus）。

这是比较 keyup 和 input 事件的 SO 线程：

const formText = document.getElementById("form_Text");
const showText = document.getElementById("showText");


formText.oninput = function(evt) {
  const inputValue = evt.target.value;

  if (inputValue == '') {
    formText.style.backgroundColor = "red";
    showText.innerHTML = "Form is empty";
  } else {
    formText.style.backgroundColor = "white";
    showText.innerHTML = "Form is not Empty, No red Background";
  }
}

Fill Your Form:
<input id="form_Text" type="text" />
<div id="showText"></div>

擦除输入内容后，表单中的必填字段不会变为红色

Required field in form doesn´t change to red after erasing input content

javascript

onfocus

onkeyup