javascript - 当值为空时，我的输入不想将其自身着色为红色

Question

问题

我的问题如下...我有一个输入，在验证了正确的信息后，它本身变成了红色。一旦我输入一个字母，我使用属性 oninput 让它变回白色。不过在函数中，我还声明如果输入的值不是任何东西，它应该变回红色，但是这部分不起作用，这是为什么？

我的 HTML:

<input oninput="validateInput (this)">

我的CSS:

input {background-color: red}

我的 JavaScript:

function validateInput (a) {
    if (a.value == '') return;
    a.style.cssText = 'background-color: #fff';
}

请注意，这是我简化的代码，在输入和我的 css 中有更多的函数和属性，我认为没有必要放入!

Answer 1

您需要使用引人注目的颜色。在默认情况下具有白色背景的元素上设置白色背景不会这样做。

此外，您的 CSS 始终将文本颜色设置为红色，而不仅仅是在字段为空时。

此外(不是您问题的直接部分)，不要使用内联 HTML 事件属性(onclick、oninput 等)。有 many reasons 不要使用这种不会消失的旧技术。使用 JavaScript 中基于现代标准的代码执行所有事件绑定(bind)。

最后，向元素应用和删除类比设置单独的样式要简单得多，也更具可扩展性。这可以通过 .classList.add, .classList.remove and classList.toggle 轻松完成。 .

尝试这样的事情:

// Get your reference to the element you want to work with:
var input = document.querySelector(".validate");

// Set up the event handler(s). In this case, we want the field
// to undergo validation as the user enters data or if the user
// leaves the field
input.addEventListener("input", validateInput);
input.addEventListener("blur", validateInput);

function validateInput() {
    if (input.value === '') {
      input.classList.add("invalid");
      input.classList.remove("valid");      
    } else {
      input.classList.remove("invalid");
      input.classList.add("valid");      
    }
}

.invalid { 
   color: red;
   background-color:yellow;
}

.valid {
   color: blue;
   background-color:aliceblue;  
}

<p>Type in the box, then backspace out all the data or just click in the box without typing and hit TAB</p>
<input class="validate">