Wie man einen Eingabewert in JavaScript erhält

Um einen Eingabewert in JavaScript zu erhalten, wählen Sie das Eingabeelement aus und lesen Sie seine Eigenschaft value. Sie können dies direkt tun; die Eingabe muss nicht in ein Formular eingebettet sein. Wählen Sie eine Suchmethode danach, wie die Eingabe identifiziert wird: über eine ID, eine gemeinsame Klasse oder einen CSS-Selektor. Die folgenden Beispiele verwenden eine kleine, browserähnliche Fixture, damit die Auswahl- und Wertleseschritte auch in der bereitgestellten Laufzeitumgebung ein sichtbares Ergebnis erzeugen können. Verwenden Sie auf einer Seite dieselben DOM-Methoden auf document; platzieren Sie das Skript nach seinem Eingabe-Markup oder führen Sie es aus, nachdem die Seite geladen wurde.

Einen Eingabewert mit document.getElementById() erhalten

Geben Sie der Eingabe eine eindeutige id und übergeben Sie diese ID dann an document.getElementById(). Die Methode gibt das übereinstimmende Element zurück, sodass seine Eigenschaft value den aktuell in dieser Eingabe gehaltenen Text liest. Das Snippet erstellt eine Eingabe, weist ihr ID und Wert zu und zeigt den ausgewählten Wert an. Der Fall in der bereitgestellten Laufzeitumgebung ergab Ada. Dieser Ansatz eignet sich gut, wenn die Seite einem Feld eine stabile, eindeutige ID gibt, etwa einer Namens- oder E-Mail-Eingabe. IDs sollten innerhalb des Dokuments eindeutig sein; wenn zwei Elemente eine teilen, kann die Suche nicht ausdrücken, welches Sie meinten. Führen Sie die Suche bei einem Feld, das später von einem Framework gerendert oder nach dem Skriptlauf eingefügt wird, erst aus, nachdem dieses Element existiert. Das zurückgegebene Objekt ist die Eingabe selbst, und .value liest ihren aktuellen Inhalt. Es liest weder eine nahe Beschriftung noch das HTML-Attribut des Elements als separate Quelle.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ id: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementById: id => elements.find(element => element.id === id) ?? null
  };
})();

const input = doc.createElement("input");
input.id = "name";
input.value = "Ada";
doc.body.append(input);

const currentValue = doc.getElementById("name").value;
doc.body.textContent = currentValue;

Ada

Eingabewerte nach Klasse mit document.getElementsByClassName() erhalten

Verwenden Sie document.getElementsByClassName(), wenn mehrere Eingaben eine Klasse teilen. In einem Browser gibt sie eine indizierte HTMLCollection zurück, kein Array. Lesen Sie die gewünschte Eingabe über ihre Position, beginnend bei Index 0, und greifen Sie dann auf .value zu. Halten Sie diese Position mit der Reihenfolge der übereinstimmenden Elemente auf der Seite abgestimmt. Der folgende Code verwendet eine kleine Fixture, wenn er außerhalb eines Browsers läuft; sein Ergebnis ist für dieses Beispiel eine indizierte Liste. Der Fall in der bereitgestellten Laufzeitumgebung wählte die zweite Eingabe und ergab Grace. Eine Klasse ist nützlich, wenn eine Seite dieselbe Art von Steuerelement wiederholt, aber der Index hängt von der Dokumentreihenfolge ab. Wenn die Seite übereinstimmende Eingaben hinzufügt, entfernt oder umordnet, kann derselbe Index auf ein anderes Feld verweisen. Kombinieren Sie die Klasse nach Möglichkeit mit einem spezifischeren Container oder wählen Sie eine ID für ein bekanntes Feld. Eine HTMLCollection ist array-ähnlich und unterstützt numerische Indizierung, ist aber kein Array; Array-Methoden wie .map() sind nicht direkt auf ihr verfügbar. Wenn Sie jede Übereinstimmung verarbeiten müssen, verwenden Sie eine Schleife oder konvertieren Sie die Collection mit Array.from().

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ className: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementsByClassName: className => elements.filter(element => element.className.split(/\s+/).includes(className))
  };
})();

const firstInput = doc.createElement("input");
firstInput.className = "contact";
firstInput.value = "Ada";

const secondInput = doc.createElement("input");
secondInput.className = "contact";
secondInput.value = "Grace";

doc.body.append(firstInput, secondInput);

const currentValue = doc.getElementsByClassName("contact")[1].value;
doc.body.textContent = currentValue;

Grace

Einen Eingabewert mit document.querySelector() erhalten

document.querySelector() akzeptiert einen CSS-Selektor und gibt das erste übereinstimmende Element zurück. Verwenden Sie #name für eine ID, .contact für eine Klasse, input für ein Tag oder [name="email"] für ein name-Attribut. Wenden Sie .value auf die ausgewählte Eingabe an. Wenn ein Selektor mit mehreren Elementen übereinstimmt, liest diese Methode nur das erste; verwenden Sie querySelectorAll(), um mit allen Übereinstimmungen zu arbeiten. Ein Selektor, der mit keinem Element übereinstimmt, gibt null zurück; vergewissern Sie sich also, dass der Selektor mit einer Eingabe übereinstimmt, bevor Sie ihren Wert lesen. Das Beispiel wählt eine Eingabe über ihr name-Attribut aus. Der Fall in der bereitgestellten Laufzeitumgebung ergab ada@example.com. Verwenden Sie einen Selektor, der das stabilste verfügbare identifizierende Detail ausdrückt, und halten Sie ihn mit dem Seiten-Markup abgestimmt. Zum Beispiel funktioniert [name="email"], wenn die Eingabe genau dieses name-Attribut hat; ändert sich das Markup zu name="contactEmail", muss sich auch der Selektor ändern. Da querySelector() nur ein Element zurückgibt, ist es knapp und klar, wenn die Seite eine beabsichtigte Übereinstimmung liefern soll. Wenn jede übereinstimmende Eingabe zählt, gibt querySelectorAll() eine Collection zurück, die Sie durchlaufen können.

Das Lesen eines Werts übermittelt kein Formular und ändert die Eingabe nicht. Es gibt Ihrem Skript einfach den aktuell eingegebenen Text, den Sie validieren oder in einem Ereignishandler verwenden können. Wenn Sie diesen Text wieder auf der Seite anzeigen, weisen Sie ihn mit textContent zu, damit der Browser ihn als Text und nicht als Markup behandelt. Entscheiden Sie in einem echten Formular auch, wann Sie den Wert lesen: Ein Ereignishandler kann ihn erfassen, nachdem der Benutzer getippt oder übermittelt hat, während Code, der nur einmal beim Laden der Seite läuft, den Wert zu diesem Zeitpunkt liest. Die drei Methoden unterscheiden sich hauptsächlich darin, wie sie das Element finden; sobald Sie das Eingabeelement haben, ist .value dieselbe zu lesende Eigenschaft.

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ name: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    querySelector: selector => {
      const match = selector.match(/^\[name=["'](.+)["']\]$/);
      return match ? elements.find(element => element.name === match[1]) ?? null : null;
    }
  };
})();

const input = doc.createElement("input");
input.name = "email";
input.value = "ada@example.com";
doc.body.append(input);

const currentValue = doc.querySelector('[name="email"]').value;
doc.body.textContent = currentValue;

ada@example.com