?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
<input>類型的元素"color"為用戶指定顏色提供了一種方法，可以通過使用顏色控制來打開可視顏色選擇器，也可以通過以"#rrggbb"十六進(jìn)制格式將顏色輸入到文本字段中。
元素的演示可能會(huì)因?yàn)g覽器和/或平臺(tái)的不同而有很大差異;在一個(gè)瀏覽器上,它可能只是一個(gè)文本輸入,它可以自動(dòng)驗(yàn)證以確保顏色信息以正確的格式輸入,在另一個(gè)瀏覽器上,它可能部署一個(gè)平臺(tái)標(biāo)準(zhǔn)的顏色選擇器,而在另一個(gè)瀏覽器上,它可能使用自定義顏色選取器窗口。
<input type="color">
值 | 一個(gè)7字符的DOMString，以小寫十六進(jìn)制表示法指定一個(gè)<color> |
|---|---|
活動(dòng) | 改變和輸入 |
支持的通用屬性 | 自動(dòng)完成和列表 |
IDL屬性 | 清單和價(jià)值 |
方法 | 選擇（） |
值
"color"類型的<input>元素的值始終是一個(gè) DOMString, 它包含一個(gè)7個(gè)字符的字符串, 它以小寫十六進(jìn)制表示形式指定 RGB 顏色。該值從不以任何其他形式出現(xiàn), 并且從不為空。
將該值設(shè)置為十六進(jìn)制符號(hào)中不是有效的，完全不透明的RGB顏色的任何內(nèi)容都將導(dǎo)致該值設(shè)置為"#000000"。尤其是，您不能使用CSS的標(biāo)準(zhǔn)顏色名稱或任何CSS函數(shù)來設(shè)置值。這是有道理的，當(dāng)你記住，HTML和CSS是不同的語言和規(guī)格。另外，不支持帶有alpha通道的顏色。以9個(gè)字符的符號(hào)指定顏色也會(huì)導(dǎo)致顏色被設(shè)置為"#000000"。
使用顏色輸入
類型的輸入"color"使用起來非常簡單，因?yàn)榭梢允褂玫膶傩詳?shù)量有限。
提供默認(rèn)顏色
除了上面這個(gè)非常簡單的例子之外，您可以創(chuàng)建一個(gè)指定默認(rèn)值的顏色選擇器，如下所示：
<input type="color" value="#ff0000">
如果您不指定值，則默認(rèn)"#000000"值為黑色。該值必須是七個(gè)字符的十六進(jìn)制符號(hào)，意思是“?！弊址竺娓鷥蓚€(gè)數(shù)字，分別代表紅色，綠色和藍(lán)色，如下所示："#rrggbb"。如果您有其他格式的顏色（例如CSS顏色名稱或CSS顏色函數(shù)（如rgb()或））rgba()，則必須將其轉(zhuǎn)換。
跟蹤顏色變化
由于是與其他的情況下<input>類型，存在可以用于檢測對(duì)所述顏色值的兩個(gè)事件：input和change。input在每次顏色改變時(shí)在輸入元素處被觸發(fā)。在change當(dāng)用戶退出顏色選擇器事件。在這兩種情況下，您都可以通過查看元素來確定元素的新值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"在用戶瀏覽器中的類型實(shí)現(xiàn)不支持顏色，而是直接輸入顏色字符串的文本字段，則可以使用該select()方法選擇編輯字段中的當(dāng)前文本。如果瀏覽器改用顏色，select()則什么也不做。
colorWell.select();
外觀變化
如前所述，當(dāng)瀏覽器不支持顏色選擇器界面時(shí)，其顏色輸入的實(shí)現(xiàn)將是一個(gè)文本框，自動(dòng)驗(yàn)證內(nèi)容以確保該值的格式正確。例如，在Safari 10.1中，您會(huì)看到如下所示的內(nèi)容：
Firefox 55中的內(nèi)容如下所示：
在這種情況下，點(diǎn)擊顏色就可以看到平臺(tái)的顏色選擇器（在這個(gè)例子中是macOS選擇器）：
驗(yàn)證
如果用戶界面無法將用戶的輸入轉(zhuǎn)換為七個(gè)字符的小寫十六進(jìn)制表示法，則顏色輸入的值將被視為無效。如果在這種情況下，:invalid偽類應(yīng)用于元素。
示例
讓我們創(chuàng)建一個(gè)例子，通過跟蹤change和input事件來獲取新的顏色，并將其應(yīng)用于<p>文檔中的每個(gè)元素，從而使用顏色輸入做更多的事情。
HTML
HTML相當(dāng)簡單。一對(duì)夫婦的描述性材料的段落與<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
建立一些變量，設(shè)置一個(gè)包含顏色的變量，當(dāng)我們第一次加載時(shí)，我們將很好地設(shè)置顏色，然后設(shè)置一個(gè)load處理程序來完成主要的啟動(dòng)工作。
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();}這將獲得對(duì)所調(diào)用的變量中的顏色輸入的引用colorWell，然后將顏色輸入的值設(shè)置為的值defaultColor。然后，顏色輸入的input事件被設(shè)置為調(diào)用我們的updateFirst()功能，并設(shè)置change事件調(diào)用updateAll()。這些都在下面看到。
最后，select()如果控件是作為文本字段實(shí)現(xiàn)的，我們調(diào)用來選擇顏色輸入的文本內(nèi)容。
反應(yīng)到顏色的變化
我們有兩個(gè)處理顏色變化的功能。該updateFirst()函數(shù)被調(diào)用以響應(yīng)該input事件。它會(huì)更改文檔中第一個(gè)段落元素的顏色以匹配顏色輸入的新值。由于input事件發(fā)生在每次對(duì)該值進(jìn)行調(diào)整（例如，如果顏色的亮度增加），這些將在使用顏色選擇器時(shí)重復(fù)發(fā)生。
function updateFirst(event) { var p = document.querySelector("p"); if (p) {
p.style.color = event.target.value; }}當(dāng)顏色選擇器被解除時(shí)，表示該值不會(huì)再次改變（除非用戶重新打開顏色選擇器），change則向該元件發(fā)送事件。我們使用這個(gè)updateAll()函數(shù)來處理這個(gè)事件：
function updateAll(event) {
document.querySelectorAll("p").forEach(function(p) {
p.style.color = event.target.value; });}這只需設(shè)置每個(gè)<p>塊的顏色，使其color屬性與使用的顏色輸入的當(dāng)前值匹配event.target。
結(jié)果
最終結(jié)果如下所示：
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
WHATWG HTML生活標(biāo)準(zhǔn) | 生活水平 | |
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 | ? | ? |