如何在网页中调用取色器?

Web前端开发者如何调取拾色器(Color Picker)?效果就和Photoshop等设计软件里的取色器一样

功能要求

网页里提供用户自主选择颜色的功能,且能通过点击颜色拾取十六进制色值(如:#00aa99)或RGB色值(如:RGB(0,170,153))。

需求分析

很多f2er可能会想到用相关插件/控件,其实最简单的办法是用HTML5Color对象,即<input type="color">元素。

当然,这个元素毕竟属于HTML5对象,存在浏览器兼容问题,请参考底下的“浏览器兼容表”。

如果项目要兼容各种浏览器,建议节选“安全色”自己布局设计一个拾色器(这不是本文分享的重点,假设有需要可以前往“经验交流区”板块发帖提问:http://www.exp99.com/bbs/);

如果项目不考虑这些因素,那么恭喜你哦!

浏览器兼容表
IE浏览器 谷歌浏览器(Chrome) 火狐浏览器(Firefox) 苹果浏览器(Safari) 欧朋浏览器(Opera)
不支持 支持 支持 不支持 支持
提示:QQ浏览器、360浏览器、UC浏览器、搜狗浏览器、百度浏览器等都基于上述浏览器的内核。

关键代码

html代码

  1. <label>颜色选择:</label> 
  2. <input type="color" id="colorGet" onchange="ColorGetFn(this)">&nbsp;&nbsp; 
  3. <label>颜色输出:</label> 
  4. <input type="text" id="colorInput" onchange="ColorInputFn(this)"> 

javascript代码

  1. function ColorGetFn(dom){ 
  2.     document.getElementById('colorInput').value = dom.value; 
  3. function ColorInputFn(dom){ 
  4.     document.getElementById('colorGet').value = dom.value; 

效果展示

通过“颜色选择”选取颜色,十六进制的色值显示在“颜色输出”里;

通过在“颜色输出”里面输入十六进制的色值,颜色效果会显示在“颜色选择”拾取器里。十六进制输入的格式:"#rrggbb",不可缺少#号且后面6位字符不能简写(用#dddddd取代#ddd),否则没效果!在控制台可以看到警告提示The specified value "#ddd" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

 

谷歌浏览器网页中的拾色器效果
谷歌浏览器网页中的拾色器效果

 

 

相关经验

导读书签
书签初始化中…