檢查輸入的顏色以禁用或啟用提交按鈕

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" />