狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

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

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

導(dǎo)讀

我們通常需要通過復(fù)雜的 Javascript 來實(shí)現(xiàn)一個(gè)顏色選擇器組件,現(xiàn)在可以使用<input type="color">實(shí)現(xiàn)。



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

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

此元素的外觀會(huì)因?yàn)g覽器不同而不同,它可能是一個(gè)簡單的文本輸入,自動(dòng)驗(yàn)證以確保顏色信息以正確的格式輸入,或一個(gè)平臺(tái)標(biāo)準(zhǔn)的顏色選擇器,或某種自定義的顏色選擇器窗口。

 

 


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

HTMLInputElement

方法select()


示例

通過跟蹤 change 和 input 事件,將新顏色應(yīng)用到文檔中的每個(gè) <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

首先設(shè)置第一次加載時(shí)的顏色變量,然后設(shè)置 load 處理器,在頁面完全加載后做主要的啟動(dòng)工作。


let colorWell;

const defaultColor = "#0000ff";


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

初始化

一旦頁面完全加載,就會(huì)調(diào)用我們的 load 事件處理器 startup()

function startup() {

  colorWell = document.queryselector("#colorWell");

  colorWell.value = defaultColor;

  colorWell.addEventListener("input", updateFirst, false);

  colorWell.addEventListener("change", updateAll, false);

  colorWell.select();

}

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

最后,如果控件被實(shí)現(xiàn)為文本字段,我們調(diào)用 select() 來選擇顏色輸入的文本內(nèi)容(如果提供的是顏色選擇器接口,這就沒有效果)。

對顏色變化作出反應(yīng)

我們提供了兩個(gè)處理顏色變化的函數(shù)。updateFirst() 函數(shù)是為了響應(yīng) input 事件而調(diào)用的。它改變文檔中第一個(gè)段落元素的顏色,以匹配顏色輸入的新值。由于每次對數(shù)值進(jìn)行調(diào)整時(shí)都會(huì)觸發(fā) input 事件(例如,如果增加了顏色的亮度),在使用顏色選擇器時(shí),這些事件會(huì)重復(fù)發(fā)生。

function updateFirst(event) {

  const p = document.queryselector("p");

  if (p) {

    p.style.color = event.target.value;

  }

}


當(dāng)退出顏色選擇器時(shí),表明值不會(huì)再改變(除非用戶重新打開顏色選擇器),會(huì)向該元素發(fā)送 change 事件。我們使用 updateAll() 函數(shù)來處理該事件,使用 Event.target.value 來獲得最終選擇的顏色:

function updateAll(event) {

  document.queryselectorAll("p").forEach((p) => {

    p.style.color = event.target.value;

  });

}

這將設(shè)置每個(gè) <p> 區(qū)塊的顏色,使其 color 屬性與顏色輸入的當(dāng)前值相匹配,顏色輸入是用 event.target 引用的。

兼容性


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


該文章在 2023/6/26 15:23:25 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved