HTML5 input新增type属性color颜色拾取器的实例代码


Posted in HTML / CSS onAugust 27, 2018

定义和用法

type 属性规定 input 元素的类型。

注释:该属性不是必需的,但是我们认为您应该始终使用它。

HTML5 input新增type属性color颜色拾取器的实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>color拾取器</title>
</head>
<body>
  <input type="color" id="color">
</body>
<script>
  document.querySelector("#color").onchange = function () {
    document.getElementById('color').click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    document.body.style.background = this.value;
  }
</script>
</html>

下面看下HTML 5 <input> type 属性

属性值

描述
button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段(带有 calendar 控件)
datetime 定义日期字段(带有 calendar 和 time 控件)
datetime-local 定义日期字段(带有 calendar 和 time 控件)
month 定义日期字段的月(带有 calendar 控件)
week 定义日期字段的周(带有 calendar 控件)
time 定义日期字段的时、分、秒(带有 time 控件)
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮,供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
range 定义带有 slider 控件的数字字段。
reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
tel 定义用于电话号码的文本字段。
text 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

总结

以上所述是小编给大家介绍的HTML5 input新增type属性color颜色拾取器的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 #HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 #HTML / CSS
canvas学习和滤镜实现代码
Aug 22 #HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 #HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 #HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 #HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
You might like
德生PL550的电路分析
2021/03/02 无线电
php5.2.0内存管理改进
2007/01/22 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python中标准模块importlib详解
2017/04/16 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python3+Appium安装使用教程
2019/07/05 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
总经理秘书工作职责
2013/12/26 职场文书
普通党员个人整改措施
2014/10/27 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
社区宣传标语口号
2015/12/26 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP