主页 / 问题 / 997896
Accepted
De.Minov
Asked:2020-06-30 17:26:09 +0000 UTC2020-06-30 17:26:09 +0000 UTC

确定一个值是否是一种颜色

  • 772

如何实现颜色 HEX、RGB 或 RGBA 系统的值检查。

例子：

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

假设我们有<input type="text" placeholder="Введите текст">，我们需要获取值并确定它是否是颜色

javascript

2 个回答

  1. Best Answer

    此答案中不会有正则表达式检查。我们创建一个块，当在字段中输入时，根据输入的值设置颜色。所有颜色验证都留给浏览器，浏览器会将预期颜色转换为 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));
});

    处理颜色时的一个有用链接，包括一个沙箱，它使用更传统的方法（正则表达式）在不同格式之间具有颜色转换器：颜色选择器 。

    • 5 
  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));

    • 2

相关问题