HTML5 input新增type屬性color顏色拾取器的實例程式碼-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5 input新增type屬性color顏色拾取器的實例程式碼

青灯夜游

Oct 09, 2018 pm 03:52 PM

html5

type 屬性規定 input 元素的型別。本文較詳細的為大家介紹了HTML5 input新增type屬性color顏色拾取器的實例代碼，有興趣的朋友跟著腳本之家小編一起看看吧

##定義與用法

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(&#39;color&#39;).click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色
    document.body.style.background = this.value;
  }
</script>
</html>

登入後複製

下面看下HTML 5 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