HTMLInputElement.popoverTargetAction — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.popoverTargetAction

Beschreibung

Die Eigenschaft popoverTargetAction von HTMLInputElement spiegelt das HTML-Attribut popovertargetaction. Sie legt fest, was mit dem Popover-Element passiert, wenn der Button aktiviert wird. Welches Element gesteuert wird, bestimmt popoverTargetElement bzw. das Attribut popovertarget.

Mögliche Werte:

"toggle" (Standard): Das Popover wird geöffnet, wenn es geschlossen ist, und geschlossen, wenn es offen ist.
"show": Das Popover wird nur geöffnet. Ist es schon offen, passiert nichts.
"hide": Das Popover wird nur geschlossen. Ist es schon geschlossen, passiert nichts.

Die Eigenschaft ist nützlich, wenn Popovers deklarativ und ohne eigene Klick-Handler gesteuert werden sollen, z. B. mit getrennten Buttons zum Öffnen und Schließen. Sie wirkt nur bei <input>-Elementen mit type="button", "submit", "reset" oder "image". Bei anderen Typen, etwa text oder checkbox, wird sie ignoriert.

Rückgabewert

Typ

"show" | "hide" | "toggle"

Beschreibung

Die aktuelle Aktion als Zeichenkette. Fehlt das Attribut oder hat es einen ungültigen Wert, wird "toggle" zurückgegeben. Beim Setzen wird das Attribut popovertargetaction geschrieben.

Beispiele

Getrennte Buttons zum Öffnen und Schließen

// HTML:
// <input type="button" id="openBtn" value="Hilfe öffnen" popovertarget="hilfe">
// <input type="button" id="closeBtn" value="Schließen" popovertarget="hilfe">
// <div id="hilfe" popover>Hier steht der Hilfetext.</div>

const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');

openBtn.popoverTargetAction = 'show';
closeBtn.popoverTargetAction = 'hide';

console.log(openBtn.popoverTargetAction);
console.log(closeBtn.getAttribute('popovertargetaction'));

show hide

Standardwert und ungültige Werte

const btn = document.createElement('input');
btn.type = 'button';

console.log(btn.popoverTargetAction); // kein Attribut gesetzt

btn.setAttribute('popovertargetaction', 'öffnen'); // ungültiger Wert
console.log(btn.popoverTargetAction);

btn.popoverTargetAction = 'HIDE'; // Groß-/Kleinschreibung egal
console.log(btn.popoverTargetAction);

toggle toggle hide

Popover-Steuerung komplett per Skript einrichten

const popover = document.createElement('div');
popover.id = 'info';
popover.popover = 'auto';
popover.textContent = 'Gespeichert!';

const trigger = document.createElement('input');
trigger.type = 'button';
trigger.value = 'Info anzeigen';
trigger.popoverTargetElement = popover;
trigger.popoverTargetAction = 'show';

document.body.append(trigger, popover);

popover.addEventListener('toggle', (e) => {
  console.log(`Popover-Zustand: ${e.newState}`);
});

Popover-Zustand: open // nach Klick auf den Button

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Eigenschaft ist erst seit 2024 in allen großen Browsern verfügbar (Chrome/Edge 114, Safari 17, Firefox 125). Unterstützung prüfen mit 'popoverTargetAction' in HTMLInputElement.prototype oder HTMLElement.prototype.hasOwnProperty('popover').
Ohne gültiges Ziel (popovertarget bzw. popoverTargetElement) hat die Eigenschaft keine Wirkung. Das Ziel braucht außerdem das Attribut popover.
Ein Submit-Button innerhalb eines Formulars sendet das Formular ab, statt das Popover zu steuern. Für die Popover-Steuerung type="button" verwenden.
Ungültige Werte führen zu keinem Fehler. Sie werden beim Lesen still als "toggle" behandelt, was Tippfehler schwer auffindbar macht.
Deaktivierte Buttons (disabled) lösen keine Popover-Aktion aus.
Die gleichnamige Eigenschaft gibt es auch an HTMLButtonElement. Für mehr Möglichkeiten im Markup ist <button> meist die bessere Wahl.

Siehe auch

HTMLInputElement.popoverTargetElement HTMLButtonElement.popoverTargetAction HTMLElement.popover HTMLElement.showPopover() HTMLElement.hidePopover() HTMLElement.togglePopover()