HTML-Tools

Kostenlose HTML Invoker Command Generator

Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.

Tool wird geladen...

Was ist HTML Invoker Command Generator?

Die Invoker Commands API ist eine deklarative HTML-Funktion, mit der Buttons andere Elemente ohne JavaScript steuern können. Mit dem commandfor-Attribut (das auf die ID eines Zielelements zeigt) und dem command-Attribut (das die Aktion angibt) kann ein Button Dialoge öffnen/schliessen, Popover umschalten, Details-Elemente erweitern/einklappen oder benutzerdefinierte Command-Events auslösen. Dies ersetzt onclick-Handler durch deklaratives, zugängliches HTML.

Kurze Antwort

Verwenden Sie die Invoker Commands API für deklarative Buttons, die Dialoge, Popover und Details ohne JavaScript steuern. Setzen Sie commandfor auf die Ziel-Element-ID und command auf die Aktion (show-modal, toggle-popover, open, close). Integrierte Befehle funktionieren nativ; benutzerdefinierte Befehle lösen ein 'command'-Event auf dem Ziel aus.

Last updated: 2026-05-28

Einschränkungen

Invoker Commands funktionieren nur für bestimmte Zieltypen: dialog (show-modal, close), popover (show-popover, hide-popover, toggle-popover) und details (open, close, toggle). Andere Elemente benötigen benutzerdefinierte Command-Event-Handler.
Die Browserunterstützung ist Baseline 2025: Chrome 117+, Edge 117+, Safari 18+. Die Firefox-Unterstützung ist in Entwicklung. Ältere Browser benötigen einen JavaScript-Click-Handler-Fallback.
Benutzerdefinierte Befehle (mit einem benutzerdefinierten Befehlswert) lösen ein 'command'-Event aus, führen aber kein integriertes Verhalten aus. Sie müssen einen JavaScript-Event-Listener auf dem Ziel hinzufügen, um benutzerdefinierte Befehle zu behandeln.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Geben Sie die Ziel-Element-ID ein und wählen Sie den Zieltyp (dialog, popover, details oder benutzerdefiniert).
Wählen Sie den Befehl —verschiedene Zieltypen unterstützen unterschiedliche Befehle (show-modal, toggle-popover, open usw.).
Legen Sie den Button-Text fest. Fügen Sie optional die Ziel-Elementvorlage und einen JS-Fallback ein.
Kopieren Sie das generierte HTML. In unterstützenden Browsern ist kein JavaScript für integrierte Befehle erforderlich.

Wofür du es nutzen kannst

Einen modalen Dialog-Trigger mit einem Button erstellen, der den Dialog deklarativ öffnet, und einem Schliessen-Button innerhalb des Dialogs, der ebenfalls deklarativ funktioniert.
Ein Popover-Menü mit einem Umschalt-Button erstellen —keine Click-Handler, kein Zustandsmanagement.
Ein Details/Disclosure-Widget erstellen, das von einem externen Button anstelle des summary-Elements gesteuert wird.

Anwendungsfalle

Praxisbeispiele

Beispiel

Deklarativer modaler Dialog

Ein Einstellungsdialog benötigt Öffnen- und Schliessen-Buttons. Verwenden Sie commandfor='settings-dialog' command='show-modal' auf dem Öffnen-Button und command='close' auf dem Schliessen-Button innerhalb des Dialogs. Für das Öffnen/Schliessen ist kein JavaScript erforderlich.

Beispiel

Popover-Menü-Umschalter

Ein Benutzermenü-Popover wird mit einem Button geöffnet und geschlossen. Verwenden Sie commandfor='user-menu' command='toggle-popover'. Der Browser verwaltet den Popover-Zustand —keine JavaScript-Nachverfolgung erforderlich.

Haufige Fehler

commandfor ohne eine passende Ziel-Element-ID verwenden —der Button tut stillschweigend nichts. Überprüfen Sie immer, ob die Ziel-ID übereinstimmt.
Einen Befehl verwenden, der vom Zieltyp nicht unterstützt wird —show-modal funktioniert nur auf dialog-Elementen, toggle-popover nur auf popover-Elementen.
Vergessen, dass Invoker Commands Baseline 2025 sind —ältere Browser benötigen einen JavaScript-Click-Handler-Fallback.

Überprüfung

Klicken Sie auf den Command-Button und überprüfen Sie, ob das Zielelement korrekt geöffnet, geschlossen oder umgeschaltet wird.
Testen Sie mit deaktiviertem JavaScript, um zu bestätigen, dass integrierte Befehle ohne Skripte funktionieren.

FAQ

Fragen zu HTML Invoker Command Generator

Funktionieren Invoker Commands ganz ohne JavaScript?

Ja, für integrierte Befehle auf dialog-, popover- und details-Elementen. Der Browser verarbeitet die Befehle showModal(), close(), showPopover(), hidePopover() und toggle nativ. Für benutzerdefinierte Befehle fügen Sie einen 'command'-Event-Listener auf dem Zielelement hinzu —ein Listener behandelt alle Befehlsaufrufe.

Was ist der Unterschied zwischen command und onclick?

command ist deklarativ —es teilt dem Browser mit, welche Aktion auf dem Ziel ausgeführt werden soll. onclick ist imperativ —Sie schreiben JavaScript, um die Aktion auszuführen. command funktioniert ohne JavaScript für integrierte Aktionen. Es kommuniziert auch die Absicht an assistive Technologie: Ein Button mit command='show-modal' kündigt seinen Zweck klarer an als ein generischer Click-Handler.

Verwandte Tools