国产在线播放91,国产免费jizz在线播放视频,黄色小视频在线播放

顏色選擇器<input type=＂color＂>

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年6月26日 15:15 本文熱度 910

導讀

我們通常需要通過復雜的 Javascript 來實現一個顏色選擇器組件，現在可以使用<input type="color">實現。

color 類型的 <input> 元素為用戶提供了指定顏色的用戶界面，或使用可視化顏色選擇器，或以 #rrggbb 十六進制格式輸入顏色值。

雖然 CSS 顏色有很多格式（如顏色名稱、功能表記和含有透明通道的十六進制），但是這里只支持簡單顏色（無透明通道）。

此元素的外觀會因瀏覽器不同而不同，它可能是一個簡單的文本輸入，自動驗證以確保顏色信息以正確的格式輸入，或一個平臺標準的顏色選擇器，或某種自定義的顏色選擇器窗口。

值	長度為 7 的指定 `<color>` 值的小寫十六進制字符串
事件	`change` 和 `input`
支持的公共屬性	`autocomplete` 和 `list`
IDL 屬性	`list` 和 `value`
DOM 接口	`HTMLInputElement`
方法	`select()`

示例

通過跟蹤 change 和 input 事件，將新顏色應用到文檔中的每個 <p> 元素。

HTML

<p>
  An example demonstrating the use of the
  <code>&lt;input type="color"&gt;</code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>

Javascript

首先設置第一次加載時的顏色變量，然后設置 load 處理器，在頁面完全加載后做主要的啟動工作。

let colorWell;
const defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

初始化

一旦頁面完全加載，就會調用我們的 load 事件處理器 startup()：

function startup() {
  colorWell = document.queryselector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

在一個叫做 colorWell 的變量中獲得對顏色 <input> 元素的引用，然后將顏色輸入的值設置為 defaultColor 中的值。然后顏色輸入的 input 事件被設置為調用我們的 updateFirst() 函數，而 change 事件被設置為調用 updateAll()。這些都在下面看到。

最后，如果控件被實現為文本字段，我們調用 select() 來選擇顏色輸入的文本內容（如果提供的是顏色選擇器接口，這就沒有效果）。

對顏色變化作出反應

我們提供了兩個處理顏色變化的函數。updateFirst() 函數是為了響應 input 事件而調用的。它改變文檔中第一個段落元素的顏色，以匹配顏色輸入的新值。由于每次對數值進行調整時都會觸發 input 事件（例如，如果增加了顏色的亮度），在使用顏色選擇器時，這些事件會重復發生。

function updateFirst(event) {
  const p = document.queryselector("p");
  if (p) {
    p.style.color = event.target.value;
  }
}

當退出顏色選擇器時，表明值不會再改變（除非用戶重新打開顏色選擇器），會向該元素發送 change 事件。我們使用 updateAll() 函數來處理該事件，使用 Event.target.value 來獲得最終選擇的顏色：

function updateAll(event) {
  document.queryselectorAll("p").forEach((p) => {
    p.style.color = event.target.value;
  });
}

這將設置每個 <p> 區塊的顏色，使其 color 屬性與顏色輸入的當前值相匹配，顏色輸入是用 event.target 引用的。

兼容性

原文：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/color

該文章在 2023/6/26 15:23:25 編輯過

關鍵字查詢

input

顏色

type

選擇

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

顏色選擇器<input type=＂color＂>

初始化

對顏色變化作出反應