检查输入的颜色以禁用或启用提交按钮

Question

我已经根据输入的有效性设置了一个不断变化的输入背景色。

然后我用这个代码检查颜色：

let elem = document.getElementById("UserInput");
console.log(elem);
let theStyle = window.getComputedStyle(elem, "").getPropertyValue("background-color");

if (theStyle === "rgb(234, 198, 198)") {
document.getElementById("Submit").disabled = true;
}
if (theStyle === "rgb(251, 250 ,245)") {
document.getElementById("Submit").disabled = false;
}

input[type="number"]+div {
display: none;
}
input[type="number"]:valid {
background-color: #fbfaf5;
}
input[type="number"]:invalid {
background-color: #eac6c6;
}
input[type="number"]:invalid+div {
display: block;
color: #c66464;
}

<input type="number" id="UserInput" class="form-control" autocomplete="off" min="0" max="99999" step="0.01" value="" required />
<input type="submit" id="Submit" />

我唯一缺少的是如何在激活时持续检查颜色(它已经在一个调用的函数中(。目前；被禁用"；是真的，因为rgb是红色的。但当我改变颜色时，即我使用了正确的输入，那么我想启用提交按钮。所以，我想我需要一个eventListener，但我就是不太了解上下文。

Answer 1

这里有一个代码片段，用于侦听输入字段中的更改。我不确定输入值与背景值的确切关系，所以这部分由您决定但是你可以使用我添加的2个按钮来测试它，当背景色为红色时更改值会禁用提交按钮当bg颜色为正确的绿色时，更改该值将启用

如果没有一个合适的事件可以让你监听，你可以使用setTimeout而不是事件监听器(我检查的每个其他解决方案都会损害网站性能-大大降低它的速度(

还有一个重要的注意事项：你有一个放错地方的逗号"style==="；rgb(251、250、245("在第三个参数(蓝色(值之前，逗号应该紧跟在第二个参数之后，然后是空格，然后是第三个值。

let elem = document.getElementById("UserInput");
elem.addEventListener('change', () => {
let theStyle = window.getComputedStyle(elem, "").getPropertyValue("background-color");
let submitBtn = document.getElementById("Submit");
if (theStyle === "rgb(234, 198, 198)") {
submitBtn.disabled = true;
} else if (theStyle === "rgb(251, 250, 245)") {
submitBtn.disabled = false;
}
});
document.querySelector("#valid-btn").addEventListener('click', () => {
elem.style.backgroundColor = "#fbfaf5";
});
document.querySelector("#invalid-btn").addEventListener('click', () => {
elem.style.backgroundColor = "#eac6c6";
});

input[type="number"]+div {
display: none;
}

input[type="number"]:invalid+div {
display: block;
color: #c66464;
}

<input type="number" id="UserInput" class="form-control" autocomplete="off" min="0" max="99999" step="0.01" value="" required />
<input type="submit" id="Submit" disabled/>
<button id="valid-btn">change bg to green</button>
<button id="invalid-btn">change bg to red</button>

Answer 2

您可以尝试onchange事件处理程序(html(，但每次尝试更改输入值时都会发生这种情况，我不知道这会对性能产生什么影响。不过现在想不出更好的解决方案了。示例：

<input onchange="someFunc()">

Answer 3

为了解决这个问题，我之前将颜色转换为十六进制，这确保了我们不必处理rgb表示法中的空格。

const form = document.querySelector('form')
const allowedColor = '#00ff00'
const forbiddenColor = '#ff0000'
const inputField = document.querySelector('#name')
inputField.style.backgroundColor = forbiddenColor // change this color to test
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(channels) {
return "#" + componentToHex(Number(channels[0])) + componentToHex(Number(channels[1])) + componentToHex(Number(channels[2]));
}
function handleOnSubmit(e) {
e.preventDefault()

const stringColor = window.getComputedStyle(inputField, null).getPropertyValue("background-color");

const channelsColor = stringColor.substring(stringColor.indexOf('(') + 1, stringColor.indexOf(')')).split(',')

const hexColor = rgbToHex(channelsColor)

if (hexColor !== forbiddenColor) {
console.log('submit')
form.submit()
}
}
form.addEventListener('submit', handleOnSubmit)

<form action="#">
<label for="name">Name: </label>
<input id="name" type="text">
<input type="submit">
</form>

Answer 4

我想由于您已经在使用有效的属性来更改CSS样式，所以我认为您也可以使用相同的属性来启用/禁用提交按钮。

let elem = document.getElementById("UserInput");
//listen to input and disable the submit based on the validity of input
elem.addEventListener('keyup',checkValidity);
elem.addEventListener('change',checkValidity);
function checkValidity(){
if(elem.validity.valid){
document.getElementById("Submit").disabled = false;
}else{
document.getElementById("Submit").disabled = true;
}
}
let theStyle = window.getComputedStyle(elem, "").getPropertyValue("background-color");
console.log(theStyle)
if (theStyle === "rgb(234, 198, 198)") {
document.getElementById("Submit").disabled = true;
}
if (theStyle === "rgb(251, 250 ,245)") {
document.getElementById("Submit").disabled = false;
}

input[type="number"]+div {
display: none;
}
input[type="number"]:valid {
background-color: #fbfaf5;
}
input[type="number"]:invalid {
background-color: #eac6c6;
}
input[type="number"]:invalid+div {
display: block;
color: #c66464;
}

<input type="number" id="UserInput" class="form-control" autocomplete="off" min="0" max="99999" step="0.01" value="" required />
<input type="submit" id="Submit" />