颜色选择器<input type=＂color＂>

当前位置：点晴教程→知识管理交流 →『技术文档交流』

freeflydom

2023年6月26日 15:15 本文热度 707

导读

我们通常需要通过复杂的 Javascript 来实现一个颜色选择器组件，现在可以使用<input type="color">实现。

color 类型的 <input> 元素为用户提供了指定颜色的用户界面，或使用可视化颜色选择器，或以 #rrggbb 十六进制格式输入颜色值。

虽然 CSS 颜色有很多格式（如颜色名称、功能表记和含有透明通道的十六进制），但是这里只支持简单颜色（无透明通道）。

此元素的外观会因浏览器不同而不同，它可能是一个简单的文本输入，自动验证以确保颜色信息以正确的格式输入，或一个平台标准的颜色选择器，或某种自定义的颜色选择器窗口。

值	长度为 7 的指定 `<color>` 值的小写十六进制字符串
事件	`change` 和 `input`
支持的公共属性	`autocomplete` 和 `list`
IDL 属性	`list` 和 `value`
DOM 接口	`HTMLInputElement`
方法	`select()`

示例

通过跟踪 change 和 input 事件，将新颜色应用到文档中的每个 <p> 元素。

HTML

<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 处理器，在页面完全加载后做主要的启动工作。

let colorWell;
const 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 的变量中获得对颜色 <input> 元素的引用，然后将颜色输入的值设置为 defaultColor 中的值。然后颜色输入的 input 事件被设置为调用我们的 updateFirst() 函数，而 change 事件被设置为调用 updateAll()。这些都在下面看到。

最后，如果控件被实现为文本字段，我们调用 select() 来选择颜色输入的文本内容（如果提供的是颜色选择器接口，这就没有效果）。

对颜色变化作出反应

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

function updateFirst(event) {
  const p = document.queryselector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

当退出颜色选择器时，表明值不会再改变（除非用户重新打开颜色选择器），会向该元素发送 change 事件。我们使用 updateAll() 函数来处理该事件，使用 Event.target.value 来获得最终选择的颜色：

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

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

兼容性

原文：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color

该文章在 2023/6/26 15:23:25 编辑过

关键字查询

input

颜色

type

选择

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。