如何改变输入字段的背景颜色后，我输入的东西?

Question

我写了下面的代码，我试图改变输入字段的背景颜色，我键入的东西。我有4个输入字段。如果我第一次点击提交，并且任何字段都是空的，则该字段的颜色将变为红色，但我需要在填充此空字段时将颜色更改为绿色。

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")
let requiredField = document.querySelectorAll(".requiredField")
inputField.forEach(function (item){
submitButton.addEventListener("click", function (){

if(item.value == '') {
item.classList.add("red");
item.nextElementSibling.classList.add("red");
}
else{
item.classList.add("green") 
item.nextElementSibling.classList.remove("green");     
}    
})
})

Answer 1

试试这个:

inputField.forEach(field => {
field.addEventListener("input", () => {
field.classList.add("green");
});
});

如果一次只希望一个字段为绿色:

inputField.forEach(field => {
field.addEventListener("input", () => {
inputField.forEach(input => {
input.classList.remove("green");
});
field.classList.add("green");
});
});

Answer 2

我不确定你所有的代码都是你所期望的，但我有一种方法，通过监听keyup事件和评估输入是否有内容来接近你的要求;您应该能够将其重新配置到您的用例中。

我还将您的四个循环中的循环移动到提交按钮单击处理程序中—否则您将向按钮添加三个相同的处理程序。

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")
submitButton.addEventListener("click", function(e) {
inputField.forEach(function(item) {
e.preventDefault();
if (item.value == '') {
item.classList.add("red");
item.nextElementSibling.classList.add("red");
} else {
item.classList.add("green")
item.nextElementSibling.classList.remove("green");
}
})
})
inputField.forEach(function (item) {
item.addEventListener('keyup', function(e) {
const theInput = e.target;
if (theInput.value) {
theInput.classList.remove('red');
theInput.classList.add('green');
}
});
});

.red {
border: red 2px solid;
}
.green {
border: green 2px solid;
}

<label for="myfield">My Field:</label>
<input class="input" id="myfield" name="myfield" />
<br/>
<label for="myotherfield">My Other Field:</label>
<input class="input" id="myotherfield" name="myotherfield" />
<button id="submit">Submit</button>

注意，另一种选择是完全省略JavaScript，只使用本机验证—您对何时以及如何应用验证样式的控制较少，但也更少编写JS:

const submitButton = document.getElementById("submit")
submitButton.addEventListener("click", function(e) {
e.preventDefault();
});

.input:invalid {
border: red 2px solid;
}
.input:valid {
border: green 2px solid;
}

<label for="myfield">My Field:</label>
<input class="input" id="myfield" name="myfield" required/>
<br/>
<label for="myotherfield">My Other Field:</label>
<input class="input" id="myotherfield" name="myotherfield" required />
<button id="submit">Submit</button>

如果您使用第一种方法，请确保您为屏幕阅读器和辅助技术提供了足够的反馈，以理解表单的状态——如果输入上没有验证或验证状态属性，并且您只是用绿色/红色边框指示有效性，屏幕阅读器将不会意识到这一点。此外，那些有红/绿色盲的人可能无法感知这种差异。

Answer 3

实际上不需要任何JavaScript。在输入上添加required属性，然后使用相应的css样式。

<input type="text" required>
<input type="text" required>
<input type="text" required>
<input type="text" required>

input:valid {
background-color: green;
}
input:invalid:required {
background-color: red;
}

Answer 4

尝试以下快速修复方法:

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")
inputField.forEach(field => {
field.addEventListener("input", () => {
inputField.forEach(input => {
input.classList.remove("green");
input.classList.remove("red");
});
if (field.value !== "") {
field.classList.add("green");
} else {
field.classList.add("red");
}
});
});