Как заблокировать или игнорировать определенный цвет в палитре цветов для типа ввода HTML?

Question

Есть ли способ запретить пользователю выбирать определенный цвет внутри палитры цветов (тип ввода = 'цвет') с помощью js или css?

Так, например, я не хочу, чтобы пользователь мог выбрать цвет # ff0000 из средства выбора.

Я не могу найти ответ, если это даже возможно.

Заранее благодарен за любую информацию.

Answer 1

Как и большинство входных html-событий, палитра цветов запускает события.В этом случае мы можем использовать change .Он запускается, как только пользователь выбрал цвет и щелкнул ОК.

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

function colorSelected(e) {
  if (e.target.value == "#ff0000") {
    alert("Please don't pick red");
  } else {

  }
}
document.getElementById("colorPicker").addEventListener("change", colorSelected);

<input type="color" id="colorPicker" value="#00ff00">

Answer 2

Я бы порекомендовал создать свой собственный интерфейс, используя только несколько «приемлемых» цветов. Конечно, приятно предоставить пользователю полный контроль над меню из миллионов цветов, но если этот выбор будет представлятьпроблема, которую вы должны ограничить, не пытаясь взломать интерфейс.

Как уже говорили другие, вы можете проверить цвет, выбранный после вводаменяется, но Я считаю маловероятным, что вы действительно хотите запретить только ОДИН цвет .Цвет «красный» состоит из множества различных оттенков и оттенков, которые, вероятно, не соответствуют вашим критериям контрастности, брендинга, значения и т. Д. Как вы, возможно, собираетесь проверить их всех?

Answer 3

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

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

Примерно так:

if(color.value == '#ff0000') {
   alert('not allowed');
   color.value = '000000';
} 

или

if(color.value !== '#ff0000' || color.value !== '#fff000') {
    //allow
} else {
   alert('not allowed')
   color.value = '000000';
}

В конце концов, я думаю, что создание собственного ограниченного средства выбора цвета будет лучшим вариантом. Или используйте такие вещи, как RGB или HSL вместо десятичного числа Hexa!

Приветствия

Answer 4

Рекомендует «запретить пользователю выбирать определенный цвет», но вы можете просто включить проверку в событие change:

document.getElementById('myColorInput').addEventListener('change', function(e){
    if (e.target.value != '#ff0000') { 
        /* apply it */ 
    } else { 
        /* do not allow it ad warn the user or something */ 
    }
});

Действие выбора самого цвета я не делаюдумаю, что это возможно, по умолчанию.Но использование этого значения в дальнейшем - все в ваших руках.

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

document.getElementById('myColorInput').addEventListener('change', function(e){
    var target = e.target;
    var value  = target.value;

    var prevStoredValue = target.getAttribute('data-storedValue');

    if (value != '#ff0000') { 
        target.setAttribute('data-storedValue', value);

        /* use it further on */ 

    } else { 
        if (prevStoredValue) {
            target.value = prevStoredValue;
        } else {
            target.setAttribute('data-storedValue', '#FFFFFF'); // or any default value
        };

        /* do not allow it and warn the user or something */ 
    }
});