input type="color"

<input>类型的元素"color"为用户指定颜色提供了一种方法，可以通过使用颜色控制来打开可视颜色选择器，也可以通过以"#rrggbb"十六进制格式将颜色输入到文本字段中。

元素的演示可能会因浏览器和/或平台的不同而有很大差异;在一个浏览器上,它可能只是一个文本输入,它可以自动验证以确保颜色信息以正确的格式输入,在另一个浏览器上,它可能部署一个平台标准的颜色选择器,而在另一个浏览器上,它可能使用自定义颜色选取器窗口。

<input type="color">

值	一个7字符的DOMString，以小写十六进制表示法指定一个<color>
活动	改变和输入
支持的通用属性	自动完成和列表
IDL属性	清单和价值
方法	选择（）

值

"color"类型的<input>元素的值始终是一个 DOMString, 它包含一个7个字符的字符串, 它以小写十六进制表示形式指定 RGB 颜色。该值从不以任何其他形式出现, 并且从不为空。

将该值设置为十六进制符号中不是有效的，完全不透明的RGB颜色的任何内容都将导致该值设置为"#000000"。尤其是，您不能使用CSS的标准颜色名称或任何CSS函数来设置值。这是有道理的，当你记住，HTML和CSS是不同的语言和规格。另外，不支持带有alpha通道的颜色。以9个字符的符号指定颜色也会导致颜色被设置为"#000000"。

使用颜色输入

类型的输入"color"使用起来非常简单，因为可以使用的属性数量有限。

提供默认颜色

除了上面这个非常简单的例子之外，您可以创建一个指定默认值的颜色选择器，如下所示：

<input type="color" value="#ff0000">

如果您不指定值，则默认"#000000"值为黑色。该值必须是七个字符的十六进制符号，意思是“＃”字符后面跟两个数字，分别代表红色，绿色和蓝色，如下所示："#rrggbb"。如果您有其他格式的颜色（例如CSS颜色名称或CSS颜色函数（如rgb()或））rgba()，则必须将其转换。

跟踪颜色变化

由于是与其他的情况下<input>类型，存在可以用于检测对所述颜色值的两个事件：input和change。input在每次颜色改变时在输入元素处被触发。在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"在用户浏览器中的类型实现不支持颜色，而是直接输入颜色字符串的文本字段，则可以使用该select()方法选择编辑字段中的当前文本。如果浏览器改用颜色，select()则什么也不做。

colorWell.select();

外观变化

如前所述，当浏览器不支持颜色选择器界面时，其颜色输入的实现将是一个文本框，自动验证内容以确保该值的格式正确。例如，在Safari 10.1中，您会看到如下所示的内容：

Firefox 55中的内容如下所示：

在这种情况下，点击颜色就可以看到平台的颜色选择器（在这个例子中是macOS选择器）：

验证

如果用户界面无法将用户的输入转换为七个字符的小写十六进制表示法，则颜色输入的值将被视为无效。如果在这种情况下，:invalid伪类应用于元素。

示例

让我们创建一个例子，通过跟踪change和input事件来获取新的颜色，并将其应用于<p>文档中的每个元素，从而使用颜色输入做更多的事情。

HTML

HTML相当简单。一对夫妇的描述性材料的段落与<input>类型"color"与ID "colorWell"，我们将用它来改变段落文字的颜色。

<p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</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 colorWell
var 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();
}

这将获得对所调用的变量中的颜色输入的引用colorWell，然后将颜色输入的值设置为的值defaultColor。然后，颜色输入的input事件被设置为调用我们的updateFirst()功能，并设置change事件调用updateAll()。这些都在下面看到。

最后，select()如果控件是作为文本字段实现的，我们调用来选择颜色输入的文本内容。

反应到颜色的变化

我们有两个处理颜色变化的功能。该updateFirst()函数被调用以响应该input事件。它会更改文档中第一个段落元素的颜色以匹配颜色输入的新值。由于input事件发生在每次对该值进行调整（例如，如果颜色的亮度增加），这些将在使用颜色选择器时重复发生。

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

当颜色选择器被解除时，表示该值不会再次改变（除非用户重新打开颜色选择器），change则向该元件发送事件。我们使用这个updateAll()函数来处理这个事件：

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

这只需设置每个<p>块的颜色，使其color属性与使用的颜色输入的当前值匹配event.target。

结果

最终结果如下所示：

规范

规范	状态	评论
WHATWG HTML生活标准	生活水平
HTML5	建议
HTML 4.01规范	建议	初始定义

浏览器兼容性

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	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18