HTML5的input color系统颜色选择器
前两天,我写了一篇《推荐两款jQuery色盘选择器》介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器。HTML5有一个input类型为color,即颜色选择器。
认识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代码:
1
2
3
4
5
6
7
8
9
10
11
|
<!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代码:
1
2
3
|
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让它飞出页面以外就好:
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" /> < title >html5 input color标签</ title > </ head > < body > < input style = "position:absolute;left:3000px;" type = "color" id = "color" /> < button id = "btn" >弹出色盘</ button > </ body > </ html > |
Chrome执行效果:
Opera就不用测试,第一轮就被k掉。
怎么获得改变颜色后的触发事件呢?
既然能弹出系统色盘可以选择颜色,那么就应该要获得用户选择颜色后的色值做相应操作。由于是直接调用系统色盘,因此我们可以监听input只要onchange即可然后获取它的value即可。
1
2
3
|
document.getElementById( 'color' ).onchange = function (){ alert( '您选择的颜色是:' + this .value) }; |
截图:
通过截图,我们发现色值都被转换成16进制格式了,也是网页通用格式。
我写了一个demo,通过系统色盘改变背景颜色,当然只支持chrome
http://www.qttc.net/static/demo/html5_input_color_20130526/
唯一的缺点是,通过系统色盘不能调节透明值!
HTML5的input color系统颜色选择器的更多相关文章
- react-color 颜色选择器组件
demo链接:github demo 安装: npm install react-color --save 有一下几种类型组件 <AlphaPicker /> <BlockPicke ...
- 改造过的JS颜色选择器
项目中用到颜色选择功能,在网上找了个颜色选择器,自己改了改代码.做成了一个可动态加载的颜色选择器. 把代码贴上,当是记录. /*Copyright(c)2009,www.supersite.me*/ ...
- 基于vue的颜色选择器color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- 插件使用一颜色选择器---cxColor
cxColor 是一款颜色选择器.这样的插件使用场景不多.可喜的这是国人写的. 官方网站: https://github.com/ciaoca/cxColor 使用方法: 1.引入jquery库 1 ...
- H5选择颜色-前端颜色选择器
开发一年多了,一直用angular2框架,框架虽然能大大减少程序员的工作量,但我还是更喜欢用原生的技术写代码. 原生的就像内功心法,框架是招式,招式虽然实用,但是想成为高手还是得有内功修养. 不多说, ...
- 基于vue的颜色选择器vue-color-picker
项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- c#/asp.net实现炫酷仿调色板/颜色选择器功能
asp.net 之颜色选择器,仿调色板功能 1. 插件非常容易使用,只需引用相应的js文件和css样式文件即可,见代码示例,插件精小,炫酷 2. 只需要初始化即可使用,并且选择的颜色会在文本框中以16 ...
- 11个JavaScript颜色选择器插件
几年前,很难找到一个合适的颜色选择器.正好看到很多不错的JavaScript颜色选择器插件,故而把这些编译汇总.在本文,Web设计师和开发人员 Kevin Liew 选取了11个相应插件,有些会比较复 ...
随机推荐
- 38 网络相关函数(六)——live555源码阅读(四)网络
38 网络相关函数(六)——live555源码阅读(四)网络 38 网络相关函数(六)——live555源码阅读(四)网络 简介 12)makeSocketNonBlocking和makeSocket ...
- 7.3---直线是否相交(CC150)
注意:就算斜率相等,但是,如果截距也相等,那么是属于相交,所以要特殊判断. public class CrossLine { public boolean checkCrossLine(double ...
- django xadmin自定义菜单
1. 自定义菜单 adminx.py class GlobalSetting(object): site_title = u'xxx后台' def kuF_site_menu(self): retur ...
- django foreign key 自动加_id问题
解决:http://stackoverflow.com/questions/8223519/preventing-django-from-appending-id-to-a-foreign-key-f ...
- Objective C 内存管理[转]
1 配对原则 alloc – release new – release retain - release copy – release 2 new和alloc-init的区别 (1)区别只在于a ...
- PHP 知识点链接
PHP 1.PHP中的危险函数全解析 http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2009/0216/333 ...
- JAVA 回调机制(callback)
序言 最近学习java,接触到了回调机制(CallBack).初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义.当然了,我在理解了回 ...
- 注册页面的js验证
简单的用户注册页面:(html) 包含用户名格式验证.邮箱格式验证.确认密码一致性验证和必填项验证.(纯javascript) <center> <h1>用户注册</h1 ...
- iOS 动画结束后 view的位置 待完善
默认的动画属性,动画结束后,view会回到原始位置.但是如果设定了 CAAnimation的 removedOnCompletion 属性,那么view会保持这个位置!但是真实的接收 点击的frame ...
- matrix_超时
问题 H: matrix 时间限制: 1 Sec 内存限制: 256 MB提交: 26 解决: 10[提交][状态][讨论版] 题目描述 给定两个长度为n的整数序列l和t,分别作为n×n矩阵F的第 ...