リストのカスタマイズにユーザーがカラー（非16進またはrbga）を入力できるようにするが、有効であることを確認する方法

Question

これをコードに実装する最良の方法を知っている人がいれば、文字列が有効な色かどうかをチェックする方法はありますか？

ユーザーがボタンをクリックして色を変更し、色の名前を入力してそのリストの背景色を変更できるようにしたいとします。

Answer 1

|で区切られた配列から文字列として RegExpに pattern属性を設定しますが、仕様 CSS Color Module Level 4から有効な色の名前を取得することができます

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>

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の、クロム、IEでテスト

とエッジのようにそれを行うことができ