javascript - 如何允许用户输入颜色(十六进制或 RGB)以进行列表自定义，但确保其有效

Question

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

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

Answer 1

您可以从规范 CSS Color Module Level 4 中获取有效的颜色名称，设置pattern属性为RegExp作为由 | 分隔的数组中的字符串对于 OR ;设置required属性位于 input type="text"元素，向相邻 <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>