Today I will introduce to you the color wheel selector of HTML5. HTML5 has an input type of color, which is a color picker.
( Introduction to "Recommending Two jQuery Color Wheel Pickers" , which is a color wheel implemented using JavaScript)
Recognize color in html5
<input type="color" />
Chrome executes:
Opera：
Other browsers Firefox and IE are not supported yet, but the latest version of Safari already supports it.
The most powerful point of the color tag is that it can directly call the color adjustment window of the system. The window that pops up in the running effect of Chrome in the screenshot above is the system color wheel window. Of course, the corresponding system color wheel can also pop up in the Apple system.
Careful students should find that although they are the same color type, the appearance of Chrome and Opera is different, but there is a fundamental difference. There is a drop-down arrow next to the color label of Opera. After clicking, the color label will be pulled down directly. A bomb layer. And only after clicking the "Other" button, the system color wheel selector will pop up, just like in Chrome
After this system window pops up, it remains active, that is, you can only choose to select a color, or cancel the closing of the window before continuing other operations.
Personalized color
In fact, it is to make the appearance of the color label customizable.
Let's take an example first. Usually, our upload button label is different under each browser.
IE has different appearances depending on the system, under win7:
Under Firefox:
Chrome下：
Under Opera:
Below Safari:
Because the appearance under each browser is inconsistent, usually we can hide the upload tag and use a div button instead to solve this problem. Of course, many sites currently do this, and there is no compatibility at all. We also tried to replicate this logic on the color tag. We define a button, and then click the button to pop up the color picker.
html code:
<input style="display:none;" type="color" id="color" />
<button id="btn">弹出色盘</button>
js代码：
document.getElementById('btn').onclick = function(){
document.getElementById('color').click();
};
结果Chrome在/Opera下测试都弹不出色盘窗口，好奇怪！后来经过调试，发现只要color的input标签不能被display:none隐藏，只要被display:none就弹不出来。也就是说却掉input标签的display:none属性后点击按钮能弹出色盘，如：
chrome下：
opera下还是弹不出色盘，可能是因为它一开始默认弹一个下拉列表的缘故：
那我们怎样在chrome下实现color标签不隐藏而又不在页面显示呢？当然，解决这个问题非常容易，我们可以让他绝对定位，然后left让它飞出页面以外就好：
<input style="position:absolute;left:3000px;" type="color" id="color" />
<button id="btn">弹出色盘</button>
Chrome执行效果：
Opera就不用测试，第一轮就被k掉。
怎么获得改变颜色后的触发事件呢？
既然能弹出系统色盘可以选择颜色，那么就应该要获得用户选择颜色后的色值做相应操作。由于是直接调用系统色盘，因此我们可以监听input只要onchange即可然后获取它的value即可。
document.getElementById('color').onchange = function(){
alert('您选择的颜色是：'+this.value)
};
截图：
通过截图，我们发现色值都被转换成16进制格式了，也是网页通用格式。
我写了一个demo，通过系统色盘改变背景颜色，当然只支持chrome
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>html5 input color标签</title>
</head>
<body style="overflow: hidden; background: rgb(255, 0, 128);">
<input style="position:absolute;left:3000px;" type="color" id="color">
<button id="btn">弹出色盘</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function(){
document.getElementById('color').click();
};
document.getElementById('color').onchange = function(){
document.body.style.background = this.value;
};
</script>
</body>
</html>
唯一的缺点是，通过系统色盘不能调节透明值！