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中的现代基于标准的代码完成所有事件绑定。

最后，将类应用和删除到元素比设置单个样式更简单，更具可伸缩性。这可以通过 .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">

Answer 2

试试这个，这对我有用。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    input {background-color: red}
</style>
</head>
<body>
<input oninput="validateInput (this)">
<script type="text/javascript">
function validateInput (a) {
    console.log(a.value.length)
    if (a.value != ''){
        a.style.cssText = 'background-color: #fff';
    }else{
        a.style.cssText = 'background-color: red';
    }

}
</script>
</body>
</html>

Answer 3

如果有输入，您当前的代码会更改背景颜色，但只有在没有输入时才返回。这并没有将输入重置为默认的CSS颜色，它什么也没做。

相反，您需要主动更改两种情况下的颜色：

＆＃13;

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

＆＃13;

input {background-color: red}

＆＃13;

<input oninput="validateInput (this)">

＆＃13;

（正如在@ ScottMarcus的回答中提到的，虽然这与你的问题没有直接关系，但最好用javascript而不是内联来定义事件处理程序;而不是＆＃34 ; oninput＆＃34;属性考虑切换到addEventListener()。）

当值为零时，我的输入并不想用红色自己着色

3 个答案: