如何在HTML输入类型颜色选择器中阻止或忽略特定颜色？

Question

是否有一种方法可以防止用户使用js或css在颜色选择器（输入类型=“颜色”）中选择特定颜色？

例如，我不希望用户能够从选择器中选择颜色＃ff0000。

我什至找不到答案。

预先感谢您提供任何信息。

Answer 1

与大多数html输入事件一样，colorpicker触发事件。在这种情况下，我们可以使用的是更改。用户选择一种颜色并单击“确定”后，它将立即被触发。

在此侦听器的回调函数中，我们可以确定如果用户选择了特定的颜色该怎么办。

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

建议使用“防止用户选择特定颜色”，但您可以在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 */ 
    }
});

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之类的东西，而不要使用十六进制的十进制！

欢呼

Answer 4

我建议您仅使用少数几种“可接受的”颜色来构建自己的界面。确保允许用户从数百万种颜色的菜单中进行完全控制是一件很不错的事情，但是如果可以的话，造成了一个问题，您应该限制选择范围，而不要尝试修改界面。

正如其他人所说，您可以检查输入更改后选择的颜色，但我发现您不太可能真的只希望禁用一种颜色。 “红色”颜色由许多不同的色调和阴影组成，这些颜色和色调可能不符合对比度，品牌，含义等方面的标准。您将如何对所有这些进行测试？