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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
html5 div布局与table布局详解
Nov 16 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php 显示指定路径下的图片
2009/10/29 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
js常用函数 不错
2006/09/08 Javascript
js原型链原理看图说明
2012/07/07 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
angular动态表单制作
2018/02/23 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python生成器generator用法实例分析
2015/06/04 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
Python循环实现n的全排列功能
2019/09/16 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
会计专业自荐信
2013/12/02 职场文书
竞聘书模板
2014/03/31 职场文书
学生会主席竞聘书
2014/03/31 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
小学生安全保证书
2015/05/09 职场文书
廉洁自律证明
2015/06/24 职场文书