2

Как реализовать проверку значения на цвет HEX, RGB или RGBA системы.

Примеры:

#000000
#07f
rgb(0,119,255)
rgba(255,255,255,.5)

Допустим у нас есть <input type="text" placeholder="Введите текст">, нужно получить значение и узнать, является ли оно цветом

1

2 ответа 2

5

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

// Создаем блок-тестер, которому будем задавать цвет,
// введенный пользователем в поле.
// Браузер пусть сам парсит и применять стили к блоку.
// @NB: Предполагаемый цвет берем именно с этого блока.
const TESTER = document.createElement('div');

// Только для отладки.
document.body.appendChild(TESTER);
const EXAMPLE = document.querySelector('.example');

// Кнопка-подсказка с цветом.
const INPUT_SUGGESTED = document.querySelector('input[name=suggested]');

// Поле для ввода цвета.
const INPUT_COLOR = document.querySelector('input[name=color]');

/**
 *  Вешаем слушателей на события.
 */
INPUT_SUGGESTED.addEventListener('click', onApplyColor);
INPUT_COLOR.addEventListener('input', onInputColor);
INPUT_COLOR.addEventListener('blur', onBlurColor);

// Обрабатываем щелчок по подсказке.
function onApplyColor(event) {
  // @NB: Берем цвет именно с блока.
  INPUT_COLOR.value = TESTER.style.color;
}

// Обрабатываем ввод цвета.
function onInputColor(event) {
  // Обязательно сбрасываем.
  // Если цвет не соответствует стандарту,
  // то браузер не хочет удалять прежний валидный стиль.
  TESTER.style.color = '';

  // Задаем цвет блоку-тестеру.
  TESTER.style.color = this.value;

  // Меняем подсказку на кнопке.
  INPUT_SUGGESTED.value = TESTER.style.color;

  EXAMPLE.style.backgroundColor = TESTER.style.color;
}

// Обрабатываем потерю фокуса с поля для ввода цвета.
function onBlurColor(event) {
  // Если цвет не соответствует стандарту.
  // Т.е. браузер не смог его обработать.
  if (!TESTER.style.color) {
    alert('Не удалось обработать введенный вами цвет.');
  }

  this.value = this.value !== TESTER.style.color ? TESTER.style.color : '';
}
input[name="suggested"][value=""] {
  display: none;
}

.example {
  border: 1px dashed #ccc;
  width: 88px;
  height: 88px;
}
<input type="text" name="color" placeholder="Введите цвет" />
<input type="button" name="suggested" value="" />

<hr>
<div class="example"></div>

К сожалению IE 11 спотыкается при попытках обработать подобное rgb(0, 119, 255, .5).


UPD Функция-помощник для определения вычисленных свойств.

// Вычисленное свойство, т.е. то,
// которое браузер обработал и применил.
// Например, браузер будет пытаться
// цвет привести в формат RGB.
// Учитываются margin, padding и т.д.
function computedProperty(property, val) {
  // Выбираем элемент с документа, либо создаём новый.
  const tester = document.querySelector('validated') || document.createElement('validated');

  // Задаем новое свойство.
  tester.style[property] = val;

  // Вычисленное свойство может быть
  // взято только у элементов, находящихся в DOM.
  document.body.appendChild(tester);

  const style = tester.style[property] && window.getComputedStyle ?
    // Для браузеров поддерживающих метод `getComputedStyle`.
    getComputedStyle(tester, null).getPropertyValue(property) :
    // Для браузеров не поддерживающих метод.
    tester.style[property] ? tester.currentStyle[property] : false

  // Обнуляем заданное свойство.
  tester.style[property] = '';

  return style;
}

let colors = [
  'fff', // Не валидное.
  '#ffff', // Не валидное для IE 11.
  '#fff',
  'hsl(0, 20%, 80%)',
  'rgb(500, 600, 700)', // Значения будут сброшены до 255.
  'rgb(0, 119, 255, .5)', // Не валидное для IE 11.
  'rgba(0, 119, 255, .5)',
  prompt('Введите свое значение', 'cyan')
];

colors.forEach(function(color) {
  console.log(color, ':', computedProperty('color', color));
});


Полезная ссылка при работе с цветом, включая песочницу, в которой есть конвертеры цвета между разными форматами с более традиционным подходом (регулярные выражения): Инструмент выбора цвета .

1
  • Правильно ли я понял механику: берём значение инпута > ставим блоку > берём с блока цвет > проверяем?
    – De.Minov
    30 июн 2019 в 11:21
2
/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$|rgba\((\s*\d+\s*,){3}[\d\.]+\)/gi

Надеюсь, регулярка вам поможет

console.log("#000000".match(/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$|rgba\((\s*\d+\s*,){3}[\d\.]+\)/gi));

console.log("#07f".match(/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$|rgba\((\s*\d+\s*,){3}[\d\.]+\)/gi));

console.log("rgb(0,119,255)".match(/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$|rgba\((\s*\d+\s*,){3}[\d\.]+\)/gi));

console.log("rgba(255,255,255,.5)".match(/#[a-f0-9]{6}\b|#[a-f0-9]{3}\b|rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$|rgba\((\s*\d+\s*,){3}[\d\.]+\)/gi));

1
  • я часто пользуюсь hsl 30 июн 2019 в 15:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.