<input type="color">

<input> элементы типа color предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет, используя либо визуальный интерфейс выбора цвета, либо введя цвет в текстовое поле в шестнадцатеричном формате #rrggbb.

Разрешены только простые цвета (без альфа-канала), хотя в CSS цвета имеют больше форматов, например, имена цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

Представление элемента может существенно отличаться в разных браузерах и/или платформах — это может быть простой текстовый ввод, который автоматически проверяет правильность введенной информации о цвете, стандартный для платформы селектор цвета или какое-либо пользовательское окно выбора цвета.

Значение value элемента <input> типа color всегда представляет собой строку, содержащую 7-символьную строку, которая определяет цвет RGB в шестнадцатеричном формате. Хотя вы можете вводить цвет в верхнем или нижнем регистре, он будет храниться в нижнем регистре. Значение никогда не имеет другой формы и никогда не бывает пустым.

Элементы ввода типа color просты из-за ограниченного числа поддерживаемых атрибутов.

Вы можете обновить приведенный выше простой пример, чтобы установить значение по умолчанию, чтобы селектор цвета был предварительно заполнен цветом по умолчанию, и селектор цвета (если таковой имеется) также будет использовать этот цвет по умолчанию:

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

Если вы не укажете значение, значение по умолчанию будет #000000, то есть черным. Значение должно быть в семизначной шестнадцатеричной записи, то есть символ "#" с последующими двумя цифрами, каждая из которых представляет красный, зеленый и синий цвет, например: #rrggbb. Если у вас есть цвета в другом формате (например, имена цветов CSS или функции цвета CSS, такие как rgb() или hsl() ), вам нужно будет преобразовать их в шестнадцатеричный формат перед установкой value.

Как и в случае с другими типами <input>, есть два события, которые можно использовать для обнаружения изменений значения цвета: input и change. input срабатывает на элементе <input> каждый раз, когда цвет изменяется. Событие change срабатывает, когда пользователь закрывает селектор цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его value.

Вот пример, который отслеживает изменения значения цвета с течением времени:

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

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

Когда браузер не поддерживает интерфейс селектора цвета, его реализация элементов ввода цвета будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение имеет правильный формат. В этом случае вы можете использовать метод select() для выбора текста, который в данный момент находится в поле редактирования.

Если браузер вместо этого использует селектор цвета, select() ничего не делает. Вы должны знать об этом поведении, чтобы ваш код мог соответствующим образом реагировать в любом случае.

colorPicker.select();

Значение элемента ввода цвета считается недопустимым, если пользовательский агент не может преобразовать введенные пользователем данные в семизначную шестнадцатеричную запись в нижнем регистре. Если это так, к элементу применяется псевдокласс :invalid.

Давайте создадим пример, который делает немного больше с элементом ввода цвета, отслеживая события change и input, чтобы взять новый цвет и применить его ко всем элементам <p> в документе.

HTML довольно прост — пара абзацев описательного материала с элементом <input> типа color с ID color-picker, который мы будем использовать для изменения цвета текста абзацев.

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="color-picker">Color:</label>
<input type="color" value="#ff0000" id="color-picker" />

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

Сначала выполняется настройка. Здесь мы устанавливаем некоторые переменные, создавая переменную, содержащую цвет, который мы установим для селектора цвета при первой загрузке, а затем устанавливаем обработчик события load для выполнения основной работы запуска после полной загрузки страницы.

let colorPicker;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Инициализация

После загрузки страницы вызывается наш обработчик событий load, startup():

function startup() {
  colorPicker = document.querySelector("#color-picker");
  colorPicker.value = defaultColor;
  colorPicker.addEventListener("input", updateFirst, false);
  colorPicker.addEventListener("change", updateAll, false);
  colorPicker.select();
}

Это получает ссылку на элемент цвета <input> в переменной с именем colorPicker, а затем устанавливает значение элемента ввода цвета в значение 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.

Окончательный результат выглядит следующим образом:

• Совместимость свойств CSS