如何允许用户输入颜色（非十六进制或rbga）进行列表自定义，但要确保其有效

Question

只是想知道是否有人知道将其实现为代码的最佳方法。 是否有检查字符串是否为有效颜色的方法？

我想允许用户单击按钮来更改颜色，然后输入颜色名称，从而更改其列表的背景颜色。

Answer 1

您可以从规范CSS Color Module Level 4获得有效的颜色名称，将pattern属性设置为RegExp作为由|分隔的数组中的字符串| 对于OR ; 在input type="text"元素上设置required属性，在相邻的<label>元素处向用户提供通知，告知颜色名称是否有效。

 window.onload = () => { const cssColor = "https://drafts.csswg.org/css-color/"; const input = document.querySelector("form input[type=text]"); const button = document.querySelector("form input[type=button]"); const img = document.querySelector("form img"); const span = document.querySelector("span"); fetch(cssColor) .then(response => response.text()) .then(html => { const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); const colorNames = Array.from( doc.querySelectorAll(".named-color-table dfn") , ({textContent}) => textContent ); console.log(colorNames); input.pattern = colorNames .concat(colorNames.map(color => color.toUpperCase())).join("|"); button.addEventListener("click", e => { if (input.checkValidity()) img.style.backgroundColor = input.value; }); input.removeAttribute("disabled"); button.removeAttribute("disabled"); span.style.display = "none"; }) } 

 form * { padding: 4px; margin: 4px; } img { border: 1px solid black; } #colorName:invalid+[for=colorName]:after { content: "Invalid color"; color: red; } #colorName:valid+[for=colorName]:after { content: "Valid color"; color: green; } 

 <span>loading valid color names..</span> <form> <input id="colorName" type="text" required pattern="" disabled/><label for="colorName"></label><br> <input type="button" value="click" disabled><br> <img alt="color" width="100px" height="100px"> </form> 

Answer 2

只需将颜色分配给样式属性，然后检查属性的长度> 0就可以了

例如你可以这样做

function testColor(color) {
    var head = document.head || document.getElementsByTagName('head')[0];
    head.style.backgroundColor = ''; // clear it first - which makes it valid
    head.style.backgroundColor = color;
    return head.style.backgroundColor.length > 0;
}

在Firefox，Chrome，IE和Edge中进行了测试