HTML input type color 类型
功能介绍
<input type="color">元素是<input>元素中的一个特定种类，用来创建一个允许用户使用颜色选择器，或输入兼容CSS语法的颜色代码的区域。（不支持Alpha通道）
此元素的外观会因浏览器不同而不同，可能是简单的验证颜色输入格式的文本框，也可能使用平台原生或自定义样式的颜色选择器。其UI除要能接收文本格式的颜色外，未要求其他特性。
属性
该元素具有下面属性及其他的全局属性。
autocompleteHTML5
设置颜色区域的autocomplete值。如果为true，则将自动填充颜色选择器上次存储的值。
autofocusHTML5
此布尔值属性使你可以指定当页面加载时，表单区域是否应当获得输入焦点。除非用户的操作覆盖这个属性，例如：在其他区域内进行输入。在整个文档中，只有一个元素可以拥有autofocus属性，值为布尔值。
disabled
此布尔值标明颜色选择其是否不可用于交互。另外，disabled时的值不会随表单提交。
name
随表单一起提交的颜色选择器的name。
value
颜色选择器的value，指定颜色选择器默认选择的颜色。input的value值必须是长度为7的字符串，以#开始，包含16进制格式的颜色值。例如：#FF0000为红色的16进制值。
使用
“color"类型的输入内容比较简单。
<input type="color" />
默认值
你可以给上面的例子添加一个默认值，对元素本身和选色器都生效。
<input type="color" value="#ff0000" />
上述代码会创建一个默认选择红色的颜色选择器。
如果你没有手动指定的话，元素的默认值为”#000000"，即黑色。
输入必须为7个字符，以"#“符号开始，后跟代表红、绿、蓝的十六进制字符各2个，形如”#rrggbb"。如果你想输入的颜色是其他格式（比如CSS中的rgb()或rgba()记法），在设定value值时必须将其转换为这种格式。
监听颜色变化
正如其他类型的<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;
});
}
选取值
如果浏览器的实现不支持为"color"类型的<input>元素提供选色器而只有一个文本框，可以使用select()方法选取输入内容。
如果浏览器提供了选色器，select()方法将会什么也不做。因此，需要留心这两种情况下方法行为的差异。
colorWell.select();
实现差异
如上文所说，如果浏览器不提供选色器，此元素将会显示为一个具备输入验证功能的文本框。
验证
如果当前的user agent下，用户输入无法转换为7个字符的十六进制RGB形式，会被判定为非法输入。
在这种情况下，:invalid伪类会生效。
参考网站:https://developer.mozilla.org/zh/docs/web/html/element/input/color
