Formular bei onchange aktualisieren, aber wie?

[Matthias Scharwies]

Servus!

Ich möchte in den Ferien für die Helferlein einen Allround-Farbwähler mit Kontrast-Checker bauen.

Bis jetzt habe ich mehrere, parallele input-Felder:

• Hex
• <input type="color">
• sowie je 3 Schieberegler und <input type="number" min="0" max="255"> für die RGB-Werte

Wenn ich ein Feld durch eine Eingabe verändere, sollen/müssen die anderen ja aktualisiert werden.

Wie soll ich da vorgehen?

Ich würde bis jetzt mit Event.targetrausfinden, wo das change-Event herkommt und dann erst diese Gruppe und dann alle anderen berechnen. Das würde ich mit vielen ifs versuchen.

Habt ihr da einen Königsweg?

Oder soll ich es viel einfacher machen und wie bei diesem HTML5-Farbwähler nur <input type="color"> und den Hex-Code verwenden? Bei dem browsereigenen Farbwähler (alle außer IE9-11) könnte man sowohl die RGB- als auch HSL-Werte als Zahlen eingeben.

Herzliche Grüße

Matthias Scharwies

[Lisa]

Hallo,

vielleicht findest du hier einige Anregungen, wobei ich das schon ziemlich gut finde aber sowas im eigenen Bestand, also hier, wäre natürlich besser.

lg.

[Matthias Scharwies]

Servus!

Hallo,

vielleicht findest du hier einige Anregungen, wobei ich das schon ziemlich gut finde

Ja, gut sind

• die Hexagon-Farbpalette und dass man
• nicht nur Hex-Codes sondern auch Farbnamen eingeben kann
• die Übersicht über die HSL-Farbtöne

Ich will etwas mit 2 Farben, aus denen dann direkt der Kontrast berechnet wird.

@Gunnar Bittersmann hatte vor einem Jahr vorgeschlagen, auch HSL zu integrieren.

aber sowas im eigenen Bestand, also hier, wäre natürlich besser.

Genau, muss man mal wieder machen. Unsere Helferlein sind ganz arm, da müssen wir mal drüber.

Meine Ideen:

• Contrast Checker
• URL-Encoder für SVG (bes. wichtig für CSS-background-images)

Habt ihr noch Wünsche?

Herzliche Grüße

Matthias Scharwies

[dedlfix]

Tach!

Wenn ich ein Feld durch eine Eingabe verändere, sollen/müssen die anderen ja aktualisiert werden.

Wie soll ich da vorgehen?

Ich würde bis jetzt mit Event.targetrausfinden, wo das change-Event herkommt und dann erst diese Gruppe und dann alle anderen berechnen. Das würde ich mit vielen ifs versuchen.

Ein if sollte reichen. Du willst ja alle außer einem bearbeiten, da bietet sich ein forEach() über die NodeList der Elemente an, und das eine wird ausgeklammert oder bekommt eine Sonderbehandlung.

dedlfix.

[Matthias Scharwies]

Servus!

Wie soll ich da vorgehen?

Das würde ich mit vielen ifs versuchen.

Ein if sollte reichen. Du willst ja alle außer einem bearbeiten, da bietet sich ein forEach() über die NodeList der Elemente an, und das eine wird ausgeklammert oder bekommt eine Sonderbehandlung.

Danke!

Herzliche Grüße

Matthias Scharwies

PS: Zwei Möglichkeiten, das normale input-Feld sowohl für HEX als auch Farbnamen zu verwenden:

SO: Javascript function to convert color names to hex codes

[Felix Riesterer]

Lieber Matthias,

Pseudocode:

document.addEventListener("change", function (event) {
  let targetInput = event.target || event.srcElement;

  document.querySelectorAll("input").forEach(function (input) {
    if (input != targetInput) {
      input.value = umgerechneterWertAus(targetInput);
    }
  });
});

Liebe Grüße

Felix Riesterer