HTML5的input color系统颜色选择器

程序猿新的分享 HTML5 input color 颜色选择器... (shuke.2016-05-13 12:30)

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>html5 input color标签</title>
    </head>
    <body>
        <input style="display:none;" type="color" id="color" />
        <button id="btn">弹出色盘</button>
    </body>
</html>

js代码：

document.getElementById('btn').onclick = function(){
    document.getElementById('color').click();
};

怎么获得改变颜色后的触发事件呢？
既然能弹出系统色盘可以选择颜色，那么就应该要获得用户选择颜色后的色值做相应操作。由于是直接调用系统色盘，因此我们可以监听input只要onchange即可然后获取它的value即可。

document.getElementById('color').onchange = function(){
    alert('您选择的颜色是：'+this.value)
};

进度：100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

wordpress单页面模板page.php

图片新热点

网站自定字体，压缩字库让网页字体与图标 *.EOT是一种压缩字库，目的是解决在网页中嵌入特殊字体的难题。例如：网页前端开发人员在网页中使用... 查看详情
酷能微日志V1.1发布 酷能微日志V1.1发布一，PHP文件，无需数据库(日志生成TXT文件保存在DATA里)。3个文件搞... 查看详情
PHPCMS调用自动广告的问题 可以专门建立一个或者几个栏目，用于放置不同的广告。在后台建立栏目时，可以先填写广告栏目的ID，在加... 查看详情
js 图片带点幻灯播放效果，适合做BA 这个效果很适合BANNER，可以加连接，也可以做幻灯片。有图有真相：... 查看详情
【原创】phpcmsv9 关于站群同布 1.首先，建立一个发步点，填写FTP相关地址，为的是能够发步到你网站空间里。这样子你的网站就不要后... 查看详情

HTML5的input color系统颜色选择器

图片新热点

导航

目录