Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Die Formularelemente von HTML5 bieten zahlreichen Möglichkeiten um komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Mit Hilfe des nativen HTML Color Pickers kann beispielsweise ein Farbton ausgewählt werden, der dann wiederum dazu benutzt werden kann in Echtzeit Bereiche umzufärben. Dazu muss der gewählte Farbwert per JavaScript ausgelesen und an eine CSS Variable übergeben werden.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

HTML <input type=“color“> auslesen

Die folgende Abbildung zeigt, was erreicht werden soll: Per Klick öffnet sich ein Farbwähler um die passende Farbe einzustellen. Die Farbe sowie der Farbcode in Hexadezimal werden in Echtzeit angezeigt.

Der Aufbau des Beispiels ist sehr simpel. Der <body> wird per CSS grau eingefärbt, wobei dieser Farbton in einer CSS-Variable (--kb-color) gespeichert ist. Zusätzlich befindet sich im HTML-Code ein Formular mit Color Picker (<input type="color">). Wenn hier der Wert verändert wird, liest ein JavaScript die Änderung aus und aktualisiert die CSS-Variable (--kb-color). Zusätzlich wird der Farbwert innerhalb des <span> mit der ID #hex aktualisiert.

<body>
  <form>
    <label for="kb_selected_color">Bitte Farbe wählen: </label>
    <input type="color"id="kb_selected_color">
    <span id="hex">(#000000)</span>
  </form>
</body>
:root {
  --kb-color: silver;
}

body {
  background: var(--kb-color);
}
// Farbe aus ColorPicker auslesen
var theInput = document.getElementById("kb_selected_color");

var theColor = theInput.value;
theInput.addEventListener("input", function() {

// Farcode (Hex) schreiben
document.getElementById("hex").innerHTML = theInput.value;

// Farbvariable schreiben
document.documentElement.style.setProperty('--kb-color',theInput.value);

}, false);

Beispiel anzeigen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. WP-News: Fluch und Segen von Avada & Rückblick auf’s WCEU 2019
    schrieb am 28.06.2019 um 10:00 Uhr:

    […] HTML Color Picker mit JavaScript auslesen Jonas Hellwig von der Agentur Kulturbanause zeigt dir, inwiefern die Formularelemente von HTML5 dir Möglichkeiten bieten, komplexe Funktionalitäten mit verhältnismäßig einfachen Mitteln herzustellen. Er zeigt ein konkretes Beispiel, bei dem der native Color Picker genutzt wird, um Bereiche in der gewählten Farbe in Echtzeit umzufärben. […]

    Antworten

Schreibe einen Kommentar zu WP-News: Fluch und Segen von Avada & Rückblick auf’s WCEU 2019 Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: