HTML input type color 类型

🌙
手机阅读
本文目录结构
axihe

功能介绍

<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


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang