HTML/Formulare/input/Farbwähler

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche

Mit input type="color" haben Sie einen Farbwähler schon im Browser integriert.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Farbwähler mit type="color" ansehen …
    <h1>Wählen Sie Ihre Lieblingsfarbe</h1>
    <input type="color" value="#ff0000">

Was früher viele Zeilen JavaScript erforderte, ist heute in die meisten Browser integriert. Wenn Sie auf das rote Farbfeld klicken, öffnet sich ein Popup, in dem Sie Farben auswählen, definieren und hinzufügen können.

Das Eingabefeld liefert einen 7stelligen String, der den HEX-Wert der eingegebenen Farbangabe übergibt. Dieser kann mit JavaScript weiterverarbeitet werden.

Anwendungsbeispiele[Bearbeiten]

Farbwähler[Bearbeiten]

Beispiel: Farbauswähler ansehen …
  <h2>Vordergrund (Schriftfarbe)</h2>
  <form action="#">
    <input type="color" name="text" value="#3983ab">
  </form>
  <h2>Hintergrund</h2>
  <form action="#">
    <input type="color" name="background" value="#ffffff">
  </form>  
  
  <output>
  </output>
Der Farbwähler besteht aus zwei Eingabefeldern. Daneben gibt es ein output-Element für die Ergebnisausgabe.
document.addEventListener("DOMContentLoaded", function () {   
  	 document.querySelector('[name="text"]').addEventListener('change', changeStyle);
  	 document.querySelector('[name="background"]').addEventListener('change', changeStyle);	 

function changeStyle() {
	var output = document.querySelector('#result');	
	output.style.color = document.querySelector('[name="text"]').value;
	output.style.backgroundColor = document.querySelector('[name="background"]').value;		
	document.querySelector('#color_val').innerHTML = document.querySelector('[name="text"]').value;
	document.querySelector('#background_val').innerHTML = document.querySelector('[name="background"]').value;
}
});
Sobald etwas eingegeben wird, feuert der change-Event und die eingegebenen Werte werden mit element.style im output-Element ausgegeben.

Styleswitcher mit currentColor[Bearbeiten]

Benutzer alter Browser sehen bei input type="color" ein Text-Eingabefeld, in das sie die entsprechenden hex-Werte eintragen können. Damit nur Farbwerte eingetragen werden, können Sie mit regulären Ausdrücken Werte vorgeben:

Beispiel: StyleSwitcher mit currentColor ansehen …
    <h1>Wählen Sie Ihre Lieblingsfarbe</h1>
    <input type="color" value="#ff0000" id="color" pattern="^#([A-Fa-f0-9]{6})$" required 
           title="Hex-Wert eingeben" placeholder="#COFFEE">

Allerdings werden Browser, die type="color" nicht interpretieren, auch pattern nicht verstehen, deshalb sollten Sie ein Polyfill einbinden: