HTML5 设置输入类型=“颜色”必需

Question

我需要为

<input type="color"/>

设置所需的值。我尝试添加

required="required"

但不起作用。我认为这种情况发生是因为黑色已经被设置为默认颜色。 （这里要求的意思是用户必须打开颜色选择器并选择所需的颜色，即使是黑色。）

Answer 1

输入类型颜色选择器的 UI 除了接受简单颜色作为文本之外没有任何必需的功能。颜色类型默认值始终为“黑色”。无论如何，您可以通过脚本进行验证。

var color = document.getElementById("color");
var inputColor =  document.getElementById('colorCode');

//check color input if not empty print value
	if(color.value){
				inputColor.innerHTML = color.value;
		}
		
		
color.addEventListener("change", function(){
     var code = this.value;
		 inputColor.innerHTML = code;
})

<input id="color" type="color">

<p id="colorCode"></p>

Answer 2

这是一个涉及 jquery 的解决方案。

var picked = false;

$("#color-picker").click(function(){
  picked = true;
});

function validateForm() {
  if (!picked) {
    //code to tell user they didn't pick a color e.g. alert("Please pick a color")
  }
  return picked;  
}

<form onsubmit="return validateForm()">
  <input type="color" id="color-picker"/>
  <input type="submit" value="submit"/>
</form>

Answer 3

我有同样的问题，你的解决方案都无效。 这里需要的是用户明确选择一种颜色，而不是仅仅单击提交并通过而不单击颜色选择器。 无论用户是否选择颜色，所有这些都会提交请求，因为它选择默认的黑色