Das Output-Element

Letzte Nacht stöberte ich in den Kellern einer besonders großen Codebasis und stolperte über unser normalize.css, das dafür sorgt, dass all unsere Markups auf verschiedenen Browsern ähnlich dargestellt werden. Ich habe es kurz überflogen und Stile für ein ziemlich eigenartiges Element namens <output> gefunden, das ich noch nie zuvor gesehen oder auch nur davon gehört hatte.

Laut MDN „stellt es das Ergebnis einer Berechnung oder einer Benutzeraktion dar“, typischerweise in Formularen verwendet. Und peinlicherweise für mich ist es keine neue und schicke Ergänzung zur Spezifikation, da Chris es bereits 2011 in einem Beitrag über value bubbles für Range-Inputs verwendet hat.

Aber egal! Was macht output und wie verwenden wir es? Nun, nehmen wir an, wir haben ein Eingabeelement mit dem type range. Dann fügen wir ein output-Element hinzu und korrelieren es mit dem Eingabeelement über sein for-Attribut.

<input type="range" name="quantity" id="quantity" min="0" max="100">
<output for="quantity"></output>

Schauen Sie sich den Pen Input Output #2 von CSS-Tricks (@css-tricks) auf CodePen an.

Es… tut eigentlich nichts. Standardmäßig hat output keine Stile und rendert keine Box oder irgendetwas im Browser. Außerdem passiert nichts, wenn wir den Wert unseres Eingabeelements ändern.

Wir müssen alles mit JavaScript verbinden. Kein Problem! Zuerst müssen wir unser Eingabeelement im DOM mit JavaScript finden, so:

const rangeInput = document.querySelector('input');

Jetzt können wir einen Event-Listener hinzufügen, sodass wir immer dann, wenn wir den Wert ändern (durch Links- oder Rechtsverschieben auf unserem Eingabeelement), eine Änderung erkennen können.

const rangeInput = document.querySelector('input');

rangeInput.addEventListener('change', function() {
  console.log(this.value);
});

this.value bezieht sich immer auf den Wert von rangeInput, da wir ihn innerhalb unseres Event-Handlers verwenden, und wir können diesen Wert dann zur Überprüfung in die Konsole zurückgeben. Danach können wir unser output-Element im DOM finden.

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

rangeInput.addEventListener('change', function() {
  console.log(this.value);
});

Und dann bearbeiten wir unseren Event-Listener, um den Wert von output so zu setzen, dass er sich ändert, wann immer wir den Wert des Eingabeelements ändern.

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

rangeInput.addEventListener('change', function() {
  output.value = this.value;
});

Und voilà! Da haben wir es, naja, meistens. Sobald Sie den Wert des Eingabeelements ändern, spiegelt der Output dies nun wider.

Schauen Sie sich den Pen Input Output #3 von Robin Rendle (@robinrendle) auf CodePen an.

Wir sollten dies wahrscheinlich verbessern, indem wir unserem Output einen Standardwert geben, damit er sofort beim Laden der Seite sichtbar ist. Das könnten wir mit dem HTML selbst machen und den Wert innerhalb des Outputs setzen.

<output for="quantity">50</output>

Aber ich glaube, das ist nicht besonders kugelsicher. Was passiert, wenn wir das Minimum oder Maximum unseres Eingabeelements ändern wollen? Wir müssten immer auch unseren Output ändern. Lasst uns den Zustand unseres Outputs in unserem Skript setzen. Hier ist eine neue Funktion namens setDefaultState.

function setDefaultState() {
  output.value = rangeInput.value;
}

Wenn das DOM fertig geladen ist, und dann rufen wir diese Funktion auf.

document.addEventListener('DOMContentLoaded', function(){
  setDefaultState();
});

Schauen Sie sich den Pen Input Output #4 von Robin Rendle (@robinrendle) auf CodePen an.

Jetzt können wir alles stylen! Aber es gibt noch eine Sache. Der Event-Listener change ist gut und schön, aber er aktualisiert den Text nicht sofort, wenn Sie nach links oder rechts wischen. Glücklicherweise gibt es einen neuen Typ von Event-Listener namens input mit ziemlich guter Browserunterstützung, den wir stattdessen verwenden können. Hier ist unser gesamter Code mit dieser Ergänzung:

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

function setDefaultState() {
  output.value = rangeInput.value;
}

rangeInput.addEventListener('input', function() {
  output.value = this.value;
});

document.addEventListener('DOMContentLoaded', function() {
  setDefaultState();
});

Schauen Sie sich den Pen Input Output #5 von Robin Rendle (@robinrendle) auf CodePen an.

Und da haben wir es! Ein Eingabeelement mit einem Output.