<input type="color">

Gli elementi <input> di tipo color forniscono un elemento dell'interfaccia utente che consente a un utente di specificare un colore, utilizzando un'interfaccia di selezione del colore visiva o inserendo il colore in un campo di testo in #rrggbb formato esadecimale.

Sono consentiti solo colori semplici (senza canale alfa) sebbene i colori CSS abbiano più formati, ad esempio nomi di colori, notazioni funzionali e un formato esadecimale con un canale alfa.

La presentazione dell'elemento può variare sostanzialmente da un browser e/o da una piattaforma all'altra: potrebbe essere un semplice input testuale che si convalida automaticamente per garantire che le informazioni sul colore siano immesse nel formato corretto, o un selettore di colori standard della piattaforma o qualche tipo della finestra del selettore colore personalizzato.

Valore

Un attributo value di un elemento <input> di tipo color è sempre una stringa che contiene una stringa di 7 caratteri che specifica un colore RGB in formato esadecimale. Sebbene sia possibile inserire il colore in maiuscolo o minuscolo, verrà memorizzato in minuscolo. Il valore non è mai in nessun'altra forma e non è mai vuoto.

Utilizzo di input di tipo color

Gli input di tipo color sono semplici, a causa del numero limitato di attributi che supportano.

Fornire un colore predefinito

Puoi aggiornare il semplice esempio sopra per impostare un valore predefinito, in modo che l'area del colore sia pre-riempita con il colore predefinito e anche il selettore colore (se presente) utilizzerà quel colore per impostazione predefinita:

<input type="color" value="#ff0000">

Se non specifichi un valore, il valore predefinito è #000000, che è nero. Il valore deve essere in notazione esadecimale di sette caratteri, ovvero il carattere "#" seguito da due cifre ciascuna che rappresenta il rosso, il verde e il blu, in questo modo: #rrggbb. Se hai colori in qualsiasi altro formato (come i nomi dei colori CSS o le funzioni dei colori CSS come rgb() o rgba()), dovrai convertirli in esadecimali prima di impostare value.

Monitoraggio dei cambiamenti di colore

Come nel caso di altri tipi di <input>, esistono due eventi che possono essere utilizzati per rilevare le modifiche al valore del colore: input e change. input viene attivato sull'elemento <input> ogni volta che il colore cambia. L'evento change viene generato quando l'utente chiude il selettore colore. In entrambi i casi, puoi determinare il nuovo valore dell'elemento guardando il suo value.

Ecco un esempio che osserva le modifiche nel tempo al valore del colore:

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);
function watchcolorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Selezione del valore

Quando un browser non supporta un'interfaccia di selezione del colore, la sua implementazione degli input di colore sarà una casella di testo che convalida automaticamente il contenuto per garantire che il valore sia nel formato corretto. In questo caso puoi utilizzare il metodo select() per selezionare il testo attualmente nel campo di modifica.

Se invece il browser usa bene un colore, select()non fa nulla. Dovresti essere consapevole di questo comportamento in modo che il tuo codice possa rispondere in modo appropriato in entrambi i casi.

colorWell.select();

Convalida

Il valore di un input di colore è considerato non valido se il programma utente non è in grado di convertire l'input dell'utente in una notazione esadecimale minuscola di sette caratteri. Se e quando questo è il caso, la pseudo-classe :invalid viene applicata all'elemento.