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

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 而不是事件侦听器（我检查过的所有其他解决方案都会损害站点性能 - 显着减慢速度）

还有一个重要的注意事项：在第三个参数（蓝色）值之前有一个错位的逗号 'theStyle === "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" />