html5颜色选择按钮,H5的input color系统颜色选择器
今天我给大家介绍HTML5的色盘选择器。HTML5有一个input类型为color,即颜色选择器。
(《推荐两款jQuery色盘选择器》介绍,那是使用JavaScript实现的色盘)
认识html5中的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标签上。我们定义一个按钮,然后点击按钮以后弹出颜色选择器。
弹出色盘
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让它飞出页面以外就好:
弹出色盘
Chrome执行效果:
Opera就不用测试,第一轮就被k掉。
怎么获得改变颜色后的触发事件呢?
既然能弹出系统色盘可以选择颜色,那么就应该要获得用户选择颜色后的色值做相应操作。由于是直接调用系统色盘,因此我们可以监听input只要onchange即可然后获取它的value即可。
document.getElementById('color').onchange = function(){
alert('您选择的颜色是:'+this.value)
};
截图:
通过截图,我们发现色值都被转换成16进制格式了,也是网页通用格式。
我写了一个demo,通过系统色盘改变背景颜色,当然只支持chrome
html5 input color标签
弹出色盘
document.getElementById('btn').onclick = function(){
document.getElementById('color').click();
};
document.getElementById('color').onchange = function(){
document.body.style.background = this.value;
};
唯一的缺点是,通过系统色盘不能调节透明值!
html5颜色选择按钮,H5的input color系统颜色选择器相关推荐
- HTML5的input color系统颜色选择器
前两天,我写了一篇<推荐两款jQuery色盘选择器>介绍,那是使用JavaScript实现的色盘,今天我给大家介绍HTML5的色盘选择器.HTML5有一个input类型为color,即颜色 ...
- html5输入框表情,H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
- SwiftUI之反转颜色colorInvert 设置View Image Color相反颜色
colorInvert修饰器可以对视图进行颜色反转设置 本文价值与收获 看完本文后,您将能够作出下面的界面 Jietu20200328-105354@2x.jpg 看完本文您将掌握的技能 了解co ...
- css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
- html调整disabled按钮颜色,Input Color disabled 属性的用法_HTML对象
Input Color disabled 属性 示例代码 D禁用拾色器: document.getElementById("myColor").disabled = true; 输 ...
- 修改input的placeholder颜色
1.CSS选择器 因为每个浏览器的CSS选择器有所差异,所以需要针对每个浏览器做单独的设定. ::-webkit-input-placeholder { /* WebKit browsers */ ...
- css select默认选中字体颜色,通过js修改input、select默认字体颜色
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失 输入您要输入的内容 select默认选中项颜色为灰色,选择后变为黑色(js实现) var unSelected = " ...
- html alert字体颜色,js里alert里的字体颜色怎么设置:字体颜色方法;fontcolor(color)...
我的总结: alert应该是没办法改变的 只有自己写个弹出窗口才可以改变字体颜色 我的总结: alert应该是没办法改变的 只有自己写个弹出窗口才可以改变字体颜色 ============== ...
- 安卓动态修改系统状态栏背景和文字颜色,以及动态显示或隐藏系统状态栏
关于动态修改系统状态栏背景.字体和图标颜色,以及动态显示或隐藏系统状态栏,一直都是都是许多项目的常规需求.但是,由于不同版本间的兼容性差异,网上的实现方法多种多样.并且,许多方法都会存在这样.那样的不 ...
- CSS渐变字体、镂空字体、input框提示信息颜色、给图片加上内阴影
1.渐变字体 主要是看:-webkit-background-clip: text; 该属性 <style>.b1{width: 500px;height: 200px;font-size ...
最新文章
- BZOJ1491: [NOI2007]社交网络(Floyd 最短路计数)
- Permission denied error: unable to index file .vs/Trip2015/v15/Server/sqlite3/db.lock fatal: adding
- Interview:算法岗位面试—11.17下午上海某网**软件公司(上市)技术面之比赛考察、目标检测算法、视频分析算法考点
- Django笔记---数据库设计
- HTML+CSS+JS实现 ❤️简单的翻纸牌记忆游戏❤️
- C++头文件,预处理详解
- [转]把复杂事物简明化
- Python中默认参数self的理解
- 计算机基础知识(免费、全面)
- 解析LDO的五大作用,这里有你意想不到的答案
- 软件测试之语音识别(ASR)测试
- 《PPT思维》第一课:PPT基础思维
- MikTex中如何使用BibTeX添加参考文献
- html怎么读取lrc文件,lrc文件怎么打开?lrc是什么文件?
- 计算向量相似度 ---余弦相似度
- 小甲鱼python游戏代码_【小甲鱼】零基础学习python pygame 飞机大战可执行源代码...
- android onCreate与onCreateView的区别
- C++读取bmp格式图片
- ubuntu18.04安装搜狗中文输入法
- JAAS基于用户身份的验证和授权
热门文章
- DirectShow之视频渲染
- 深入Guerrilla Games解密次世代开山大作《杀戮地带暗影坠落》(The technology of Killzone Shadow Fall)
- 图解机器学习:人人都能懂的算法原理
- 计算机软件故障排除ppt,计算机基础知识及常见故障排除.ppt
- Zemax学习笔记(5)- 设计单透镜实例_2,分析
- 网页版-抽签程序源码
- 绿色版飞信LibFetion提示用户密码错误的解决办法,直接改用飞信号登录即可
- 仙剑制作人教你成为游戏人
- 摄像机标定的简单理解与纪要
- android qq输入法,Android版QQ输入法:滑动输入成最大亮点