?
This document uses PHP Chinese website manual Release
<input>類型的元素"color"為用戶指定顏色提供了一種方法，可以通過使用顏色控制來打開可視顏色選擇器，也可以通過以"#rrggbb"十六進制格式將顏色輸入到文本字段中。
元素的演示可能會因瀏覽器和/或平臺的不同而有很大差異;在一個瀏覽器上,它可能只是一個文本輸入,它可以自動驗證以確保顏色信息以正確的格式輸入,在另一個瀏覽器上,它可能部署一個平臺標準的顏色選擇器,而在另一個瀏覽器上,它可能使用自定義顏色選取器窗口。
<input type="color">
值 | 一個7字符的DOMString，以小寫十六進制表示法指定一個<color> |
|---|---|
活動 | 改變和輸入 |
支持的通用屬性 | 自動完成和列表 |
IDL屬性 | 清單和價值 |
方法 | 選擇（） |
值
"color"類型的<input>元素的值始終是一個 DOMString, 它包含一個7個字符的字符串, 它以小寫十六進制表示形式指定 RGB 顏色。該值從不以任何其他形式出現(xiàn), 并且從不為空。
將該值設置為十六進制符號中不是有效的，完全不透明的RGB顏色的任何內(nèi)容都將導致該值設置為"#000000"。尤其是，您不能使用CSS的標準顏色名稱或任何CSS函數(shù)來設置值。這是有道理的，當你記住，HTML和CSS是不同的語言和規(guī)格。另外，不支持帶有alpha通道的顏色。以9個字符的符號指定顏色也會導致顏色被設置為"#000000"。
使用顏色輸入
類型的輸入"color"使用起來非常簡單，因為可以使用的屬性數(shù)量有限。
提供默認顏色
除了上面這個非常簡單的例子之外，您可以創(chuàng)建一個指定默認值的顏色選擇器，如下所示：
<input type="color" value="#ff0000">
如果您不指定值，則默認"#000000"值為黑色。該值必須是七個字符的十六進制符號，意思是“?！弊址竺娓鷥蓚€數(shù)字，分別代表紅色，綠色和藍色，如下所示："#rrggbb"。如果您有其他格式的顏色（例如CSS顏色名稱或CSS顏色函數(shù)（如rgb()或））rgba()，則必須將其轉換。
跟蹤顏色變化
由于是與其他的情況下<input>類型，存在可以用于檢測對所述顏色值的兩個事件：input和change。input在每次顏色改變時在輸入元素處被觸發(fā)。在change當用戶退出顏色選擇器事件。在這兩種情況下，您都可以通過查看元素來確定元素的新值value。
colorPicker.addEventListener("input", updateFirst, false);colorPicker.addEventListener("change", watchColorPicker, false);function watchColorPicker(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value; });}選擇值
如果<input>元素"color"在用戶瀏覽器中的類型實現(xiàn)不支持顏色，而是直接輸入顏色字符串的文本字段，則可以使用該select()方法選擇編輯字段中的當前文本。如果瀏覽器改用顏色，select()則什么也不做。
colorWell.select();
外觀變化
如前所述，當瀏覽器不支持顏色選擇器界面時，其顏色輸入的實現(xiàn)將是一個文本框，自動驗證內(nèi)容以確保該值的格式正確。例如，在Safari 10.1中，您會看到如下所示的內(nèi)容：
Firefox 55中的內(nèi)容如下所示：
在這種情況下，點擊顏色就可以看到平臺的顏色選擇器（在這個例子中是macOS選擇器）：
驗證
如果用戶界面無法將用戶的輸入轉換為七個字符的小寫十六進制表示法，則顏色輸入的值將被視為無效。如果在這種情況下，:invalid偽類應用于元素。
示例
讓我們創(chuàng)建一個例子，通過跟蹤change和input事件來獲取新的顏色，并將其應用于<p>文檔中的每個元素，從而使用顏色輸入做更多的事情。
HTML
HTML相當簡單。一對夫婦的描述性材料的段落與<input>類型"color"與ID "colorWell"，我們將用它來改變段落文字的顏色。
<p>An example demonstrating the use of the <code><input type="color"></code> control.</p><label for="colorWell">Color:</label><input type="color" value="#ff0000" id="colorWell"><p>Watch the paragraph colors change when you adjust the color picker. As you make changes in the color picker, the first paragraph's color changes, as a preview (this uses the <code>input</code> event). When you close the color picker, the <code>change</code> event fires, and we detect that to change every paragraph to the selected color.</p>
JavaScript
建立一些變量，設置一個包含顏色的變量，當我們第一次加載時，我們將很好地設置顏色，然后設置一個load處理程序來完成主要的啟動工作。
var colorWellvar defaultColor = "#0000ff";window.addEventListener("load", startup, false);初始化
一旦頁面被加載，我們的"load"處理程序startup()，被稱為：
function startup() {
colorWell = document.querySelector("#colorWell");
colorWell.value = defaultColor;
colorWell.addEventListener("input", updateFirst, false);
colorWell.addEventListener("change", updateAll, false);
colorWell.select();}這將獲得對所調(diào)用的變量中的顏色輸入的引用colorWell，然后將顏色輸入的值設置為的值defaultColor。然后，顏色輸入的input事件被設置為調(diào)用我們的updateFirst()功能，并設置change事件調(diào)用updateAll()。這些都在下面看到。
最后，select()如果控件是作為文本字段實現(xiàn)的，我們調(diào)用來選擇顏色輸入的文本內(nèi)容。
反應到顏色的變化
我們有兩個處理顏色變化的功能。該updateFirst()函數(shù)被調(diào)用以響應該input事件。它會更改文檔中第一個段落元素的顏色以匹配顏色輸入的新值。由于input事件發(fā)生在每次對該值進行調(diào)整（例如，如果顏色的亮度增加），這些將在使用顏色選擇器時重復發(fā)生。
function updateFirst(event) { var p = document.querySelector("p"); if (p) {
p.style.color = event.target.value; }}當顏色選擇器被解除時，表示該值不會再次改變（除非用戶重新打開顏色選擇器），change則向該元件發(fā)送事件。我們使用這個updateAll()函數(shù)來處理這個事件：
function updateAll(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value; });}這只需設置每個<p>塊的顏色，使其color屬性與使用的顏色輸入的當前值匹配event.target。
結果
最終結果如下所示：
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
WHATWG HTML生活標準 | 生活水平 | |
HTML5 | 建議 | |
HTML 4.01規(guī)范 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 20.0 | 38 | 29 (29) 1 | No support | 11.01 | 10 |
list | 20.0 | ? | No support2 | No support | ? | ? |
autocomplete | 20.0 | ? | No support3 | No support | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | 4.4 | 27.0 (27.0) | No support | (Yes) | ? |
list | ? | No support2 | No support | ? | ? |
autocomplete | ? | No support3 | No support | ? | ? |