Question

我需要为<input type="color"/>设置所需的值。我试图添加required="required"，但它不起作用。我认为它是以这种方式发生的，因为黑色已经设置为默认颜色。（此处需要表示用户必须打开颜色选择器并选择必要的颜色，即使它是黑色。）

Answer 1

这是一个涉及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 2

输入类型颜色选择器的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>

HTML5设置输入类型=＆＃34;颜色＆＃34;需要

2 个答案: