主頁 > 知識庫 > HTML5 input新增type屬性color顏色拾取器的實例代碼

HTML5 input新增type屬性color顏色拾取器的實例代碼
熱門標簽：南寧點撥外呼系統(tǒng)哪家公司做的好 成都智能外呼系統(tǒng)平臺 云南大理400電話申請官方 黃島區(qū)地圖標注 鎮(zhèn)江智能外呼系統(tǒng)有效果嗎 當涂高德地圖標注 四川點撥外呼系統(tǒng) 電銷機器人電話用什么卡 江蘇智能電銷機器人哪家好

定義和用法

type 屬性規(guī)定 input 元素的類型。

注釋：該屬性不是必需的，但是我們認為您應該始終使用它。

<!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(); // 必須添加觸發(fā)click事件否則不能通過點擊確定按鈕觸發(fā)更改顏色
    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 控件的數(shù)字字段
password 定義密碼字段。字段中的字符會被遮蔽。
radio 定義單選按鈕。
range 定義帶有 slider 控件的數(shù)字字段。
reset 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值。
search 定義用于搜索的文本字段。
submit 定義提交按鈕。提交按鈕向服務器發(fā)送數(shù)據(jù)。
tel 定義用于電話號碼的文本字段。
text 默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。
url 定義用于 URL 的文本字段。

總結

以上所述是小編給大家介紹的HTML5 input新增type屬性color顏色拾取器的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

標簽：廣西 西寧 酒泉 十堰 咸寧 淮安 佳木斯 南京

巨人網絡通訊聲明：本文標題《HTML5 input新增type屬性color顏色拾取器的實例代碼》，本文關鍵詞  HTML5,input,新增,type,屬性,；如發(fā)現(xiàn)本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《HTML5 input新增type屬性color顏色拾取器的實例代碼》相關的同類信息！
  • 本頁收集關于HTML5 input新增type屬性color顏色拾取器的實例代碼的相關信息資訊供網民參考！
    • 推薦文章