H5的input color系统颜色选择器

青春..荒唐

浏览: 979250 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

今天我给大家介绍HTML5的色盘选择器。HTML5有一个input类型为color，即颜色选择器。

（《推荐两款jQuery色盘选择器》介绍，那是使用JavaScript实现的色盘）

认识html5中的color

<input type="color" />

Chrome执行：

Opera：

其它浏览器Firefox、IE暂不支持，Safari最新版本已支持。

color标签最强大的一点是直接能调用系统的颜色调节窗口，上面截图Chrome的运行效果中弹出的窗口就是系统色盘窗口，当然，包括苹果系统也能弹出相应的系统色盘。

细心的同学应该发现，虽然同样是color类型，但Chrome与Opera下的外观并不一样，但还有一个根本性质的区别就是Opera的color标签旁边有一个下拉箭头，点击后直接在color标签下拉出一个弹层。而只有点击“其它”按钮以后，才弹出系统色盘选择器，如同Chrome中的一样

这个系统窗口弹出来后，就保持活跃性，即你只能选择选择颜色，或者取消关闭窗口以后才能继续其它操作。

个性化color

其实就是让color标签外观可以自定义。

我们先来举一个例子，通常我们的上传按钮标签在各个浏览器下都不一样，

IE根据系统不一样也有不同的外观，在win7下：

FireFox下：

Chrome下：

Opera下：

Safari下：

因为每个浏览器下的外观都不一致，通常我们可以让上传标签隐藏，然后使用一个div按钮来替代解决这个问题，当然目前好多站点都这么干，完全没有兼容性。我们也尝试着把这一逻辑照搬到color标签上。我们定义一个按钮，然后点击按钮以后弹出颜色选择器。

html代码：

<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>

唯一的缺点是，通过系统色盘不能调节透明值！

分享到：

单选与多选 | HTML属性汇总

2017-12-24 22:04
浏览 2863
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论