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

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

我想既然您已经在使用有效属性来更改 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" />

Answer 2

这是一个监听输入字段变化的代码 sn-p。 我不确定输入值与背景值的确切关系，所以我将这部分留给你决定 但是您可以使用我添加的 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 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

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

<input onchange="someFunc()">