<input type="button"> - HTML

Experiment: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.

`Schaltfläche ohne Wert`

Wenn Sie keinen value angeben, erhalten Sie eine leere Schaltfläche:

html

`Verwendung von Schaltflächen`

-Elemente haben kein Standardverhalten (ihre Verwandten, und , werden verwendet, um Formulare jeweils abzusenden und zurückzusetzen). Um Schaltflächen etwas tun zu lassen, müssen Sie JavaScript-Code schreiben, um die Arbeit zu erledigen.

`Eine einfache Schaltfläche`

Wir beginnen mit der Erstellung einer einfachen Schaltfläche mit einem click-Ereignisbehandler, der unsere Maschine startet (genauer gesagt, er wechselt den value der Schaltfläche und den Textinhalt des folgenden Absatzes):

html The machine is stopped. js const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "Start machine") { button.value = "Stop machine"; paragraph.textContent = "The machine has started!"; } else { button.value = "Start machine"; paragraph.textContent = "The machine is stopped."; } } Das Skript erhält eine Referenz auf das HTMLInputElement-Objekt, das das im DOM repräsentiert, und speichert diese Referenz in der Variablen button. addEventListener() wird dann verwendet, um eine Funktion festzulegen, die ausgeführt wird, wenn click-Ereignisse auf der Schaltfläche auftreten.

`Hinzufügen von Tastaturkürzeln zu Schaltflächen`

Tastaturkürzel, auch als Zugriffstasten und Tastaturequivalente bekannt, ermöglichen es dem Benutzer, eine Schaltfläche mit einer Taste oder einer Tastenkombination auf der Tastatur auszulösen. Um einer Schaltfläche ein Tastaturkürzel hinzuzufügen — genau wie bei jedem , für das es sinnvoll ist — verwenden Sie das globale Attribut accesskey.

In diesem Beispiel wird s als Zugriffstaste angegeben (Sie müssen s plus die spezifischen Modifikatortasten für Ihre Browser-/Betriebssystemkombination drücken; siehe accesskey für eine nützliche Liste dieser). html The machine is stopped. const button = document.querySelector("input"); const paragraph = document.querySelector("p"); button.addEventListener("click", updateButton); function updateButton() { if (button.value === "Start machine") { button.value = "Stop machine"; paragraph.textContent = "The machine has started!"; } else { button.value = "Start machine"; paragraph.textContent = "The machine is stopped."; } } Hinweis: Das Problem mit dem obigen Beispiel ist natürlich, dass der Benutzer nicht weiß, was die Zugriffstaste ist! In einer realen Website müssten Sie diese Information auf eine Weise bereitstellen, die das Design der Website nicht stört (zum Beispiel, indem Sie einen leicht zugänglichen Link bieten, der auf Informationen über die Zugriffstasten der Website verweist).

`Deaktivieren und Aktivieren einer Schaltfläche`

Um eine Schaltfläche zu deaktivieren, geben Sie das globale Attribut disabled auf ihr an, wie folgt:

html Festlegung des deaktivierten Attributs Sie können Schaltflächen zur Laufzeit aktivieren und deaktivieren, indem Sie disabled auf true oder false setzen. In diesem Beispiel beginnt unsere Schaltfläche im aktivierten Zustand, aber wenn Sie sie drücken, wird sie mit button.disabled = true deaktiviert. Eine setTimeout()-Funktion wird dann verwendet, um die Schaltfläche nach zwei Sekunden wieder in den aktivierten Zustand zu versetzen. html js const button = document.querySelector("input"); button.addEventListener("click", disableButton); function disableButton() { button.disabled = true; button.value = "Disabled"; setTimeout(() => { button.disabled = false; button.value = "Enabled"; }, 2000); } Vererbung des deaktivierten Zustands Wenn das disabled-Attribut nicht angegeben ist, erbt die Schaltfläche ihren disabled-Zustand von ihrem übergeordneten Element. Dies macht es möglich, Gruppen von Elementen auf einmal zu aktivieren und zu deaktivieren, indem sie in einem Container wie einem -Element eingeschlossen werden und dann disabled auf dem Container gesetzt wird. Das untenstehende Beispiel zeigt dies in Aktion. Dies ist sehr ähnlich zu dem vorherigen Beispiel, außer dass das disabled-Attribut auf dem gesetzt wird, wenn die erste Schaltfläche gedrückt wird - dies führt dazu, dass alle drei Schaltflächen deaktiviert werden, bis der Zwei-Sekunden-Timeout abgelaufen ist. html Button group js const button = document.querySelector("input"); const fieldset = document.querySelector("fieldset"); button.addEventListener("click", disableButton); function disableButton() { fieldset.disabled = true; setTimeout(() => { fieldset.disabled = false; }, 2000); } Hinweis: Im Gegensatz zu anderen Browsern speichert Firefox den disabled-Zustand eines -Elements auch nach dem Neuladen der Seite. Als Workaround setzen Sie das autocomplete-Attribut des -Elements auf off. (Weitere Details finden Sie unter Firefox-Bug 654072.)

`Validierung`

Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil; sie haben keinen wirklichen Wert, der eingeschränkt werden könnte.

`Beispiele`

Das untenstehende Beispiel zeigt eine sehr einfache Zeichen-App, die mit einem -Element und etwas CSS und JavaScript erstellt wurde (wir blenden das CSS der Kürze halber aus). Die oberen beiden Steuerelemente ermöglichen die Auswahl der Farbe und Größe des Zeichenstifts. Die Schaltfläche ruft beim Klicken eine Funktion auf, die die Leinwand löscht.

html 30 body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } js const canvas = document.querySelector(".myCanvas"); const width = (canvas.width = window.innerWidth); const height = (canvas.height = window.innerHeight - 85); const ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); const colorPicker = document.querySelector('input[type="color"]'); const sizePicker = document.querySelector('input[type="range"]'); const output = document.querySelector(".output"); const clearBtn = document.querySelector('input[type="button"]'); // covert degrees to radians function degToRad(degrees) { return (degrees * Math.PI) / 180; } // update size picker output value sizePicker.oninput = () => { output.textContent = sizePicker.value; }; // store mouse pointer coordinates, and whether the button is pressed let curX; let curY; let pressed = false; // update mouse pointer coordinates document.onmousemove = (e) => { curX = e.pageX; curY = e.pageY; }; canvas.onmousedown = () => { pressed = true; }; canvas.onmouseup = () => { pressed = false; }; clearBtn.onclick = () => { ctx.fillStyle = "rgb(0 0 0)"; ctx.fillRect(0, 0, width, height); }; function draw() { if (pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc( curX, curY - 85, sizePicker.value, degToRad(0), degToRad(360), false, ); ctx.fill(); } requestAnimationFrame(draw); } draw();

`Technische Zusammenfassung`

Wert	Ein String, der als Beschriftung der Schaltfläche verwendet wird
Ereignisse	[`click`](/de/docs/Web/API/Element/click_event)
Unterstützte allgemeine Attribute	`type` und `value`
IDL-Attribute	`value`
DOM-Schnittstelle	[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)
Methoden	Keine
Implizierte ARIA-Rolle	`button`

`Spezifikationen`

Specification
HTML # button-state-(type=button)

`Browser-Kompatibilität`

Siehe auch und die HTMLInputElement-Schnittstelle, die es implementiert. Das modernere MDN-Feedback-Box War diese Übersetzung hilfreich? Diese Seite wurde automatisch aus dem Englischen übersetzt. Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden