HTMLInputElement.popoverTargetElement — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.popoverTargetElement

Beschreibung

Die Eigenschaft popoverTargetElement ist die JavaScript-Entsprechung des HTML-Attributs popovertarget. Das Attribut enthält nur die ID des Ziels als Text. Die Eigenschaft enthält dagegen direkt eine Referenz auf das Element. Mit ihr verbinden Sie ein <input type="button"> mit einem Element, das das Attribut popover trägt. Ein Klick auf die Schaltfläche öffnet, schließt oder schaltet das Popover dann ganz ohne eigenen Klick-Handler um.

Was beim Klick passiert, legt die zugehörige Eigenschaft popoverTargetAction fest: "toggle" (Standard), "show" oder "hide". Wenn Sie über die Eigenschaft ein Element zuweisen, braucht das Ziel keine ID. Das ist praktisch bei dynamisch erzeugten Elementen, wiederverwendbaren Komponenten oder wenn Sie ID-Kollisionen vermeiden wollen.

Weisen Sie null zu, wird die Verbindung aufgehoben und das Attribut popovertarget entfernt. Die Popover-API übernimmt automatisch Barrierefreiheit (aria-expanded und Fokus-Verhalten), Light-Dismiss (Schließen per Klick daneben oder mit Esc) und die Darstellung in der Top-Layer-Ebene.

Parameter

Name	Typ	Default	Beschreibung
$value Pflicht	Element \| null	null	Beim Setzen: das Element mit dem Attribut `popover`, das gesteuert werden soll, oder `null`, um die Verbindung zu lösen.

Rückgabewert

Typ

Element | null

Beschreibung

Das zugeordnete Ziel-Element oder null, wenn kein Ziel gesetzt ist oder die ID im Attribut popovertarget zu keinem Element passt.

Beispiele

Ziel per JavaScript zuweisen (ohne ID)

// HTML: <input type="button" value="Hilfe" class="help-btn">
const button = document.querySelector('.help-btn');

const popover = document.createElement('div');
popover.popover = 'auto';
popover.textContent = 'Hier finden Sie Hilfe zum Formular.';
document.body.append(popover);

// Verbindung herstellen – eine ID ist nicht nötig
button.popoverTargetElement = popover;
button.popoverTargetAction = 'toggle';

console.log(button.popoverTargetElement === popover);
console.log(button.getAttribute('popovertarget'));

true ""

Vorhandene Verbindung aus dem HTML auslesen

// HTML:
// <input type="button" id="menuBtn" value="Menü" popovertarget="menu">
// <div id="menu" popover>Menüinhalt</div>
const btn = document.getElementById('menuBtn');
const target = btn.popoverTargetElement;

console.log(target?.id);
console.log(target?.popover);

menu auto

Ein Button, mehrere Popovers je nach Zustand

// HTML: <input type="button" id="infoBtn" value="Info">
// <div id="infoKurz" popover>Kurzinfo</div>
// <div id="infoLang" popover>Ausführliche Info …</div>
const infoBtn = document.getElementById('infoBtn');
const kurz = document.getElementById('infoKurz');
const lang = document.getElementById('infoLang');
const detailModus = document.querySelector('#detailCheckbox');

const aktualisiereZiel = () => {
  infoBtn.popoverTargetElement = detailModus?.checked ? lang : kurz;
};

detailModus?.addEventListener('change', aktualisiereZiel);
aktualisiereZiel();

Verbindung lösen

const btn = document.querySelector('input[popovertarget]');
btn.popoverTargetElement = null;

console.log(btn.hasAttribute('popovertarget'));
console.log(btn.popoverTargetElement);

false null

// Wichtig · Fallstricke

Nur Schaltflächen-Typen: Die Verbindung wirkt nur bei Eingabefeldern, die als Schaltfläche dienen, typischerweise type="button". Bei type="submit" innerhalb eines Formulars hat das Absenden Vorrang. Bei type="text" und ähnlichen Typen passiert beim Klick nichts.
Ziel braucht das Attribut popover: Fehlt es, bleibt ein Klick wirkungslos. Es gibt dabei keine Fehlermeldung.
Attribut vs. Eigenschaft: Wenn Sie ein Element per Eigenschaft zuweisen, wird das Attribut popovertarget auf einen leeren String gesetzt und nicht auf die ID. CSS-Selektoren wie [popovertarget="menu"] passen dann nicht mehr.
Typprüfung: Wenn Sie etwas zuweisen, das weder ein Element noch null ist, wird ein TypeError ausgelöst.
Shadow DOM: Das Ziel muss vom Button aus erreichbar sein, also im selben Baum oder in einem umgebenden Baum liegen. Liegt das Ziel in einem fremden, tieferen Shadow Root, liefert der Getter null.
Kompatibilität: Erst seit 2024 in allen großen Browsern verfügbar. Für ältere Browser prüfen Sie die Unterstützung mit 'popoverTargetElement' in HTMLInputElement.prototype und binden bei Bedarf ein Polyfill ein (z. B. @oddbird/popover-polyfill).

Siehe auch

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