HTMLInputElement: popoverTargetElement-Eigenschaft

Baseline 2025 *

Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Die popoverTargetElement-Eigenschaft des HTMLInputElement-Interfaces erhält und setzt das Popover-Element, das durch ein <input>-Element vom type="button" gesteuert wird.

Es ist das JavaScript-Äquivalent zum popovertarget-HTML-Attribut.

Die Herstellung einer Beziehung zwischen einem Popover und seinem auslösenden Button über die popoverTargetElement-Eigenschaft hat zwei zusätzliche nützliche Effekte:

Der Browser erstellt eine implizite Beziehung durch aria-details und aria-expanded zwischen Popover und Auslöser und platziert das Popover in einer logischen Position in der Tastaturfokus-Navigationsreihenfolge, wenn es angezeigt wird. Dies macht das Popover für Tastatur- und Hilfstechnologie (AT)-Benutzer zugänglicher (siehe auch Popover-Zugänglichkeitseigenschaften).
Der Browser erstellt eine implizite Ankerreferenz zwischen den beiden, was es sehr bequem macht, Popovers relativ zu ihren Steuerungen mithilfe der CSS-Ankerpositionierung zu positionieren. Siehe Popover-Ankerpositionierung für weitere Details.

Wert

Ein Verweis auf ein Popover-Element im DOM.

Beispiele

function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein <div>-Element als Popover gesetzt wird und es dann als popoverTargetElement eines <input> vom type="button" gesetzt wird. Das popover-Attribut wird auf "auto" gesetzt, sodass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen ("leicht verworfen") werden kann.

Zunächst definieren wir ein <input>, das wir zur Anzeige und zum Ausblenden des Popovers verwenden werden, sowie ein <div>, das das Popover sein wird. In diesem Fall setzen wir nicht das popovertargetaction-HTML-Attribut auf dem <input> oder das popover-Attribut auf dem <div>, da wir dies programmatisch tun werden.

html

<input id="toggleBtn" type="button" value="Toggle popover" />
<div id="mypopover">This is popover content!</div>

Der JavaScript-Code erhält zunächst einen Zugriff auf die <div>- und <input>-Elemente. Dann wird eine Funktion definiert, um die Unterstützung der Popover-API zu überprüfen.

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

// Check for popover API support.
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des <div>-Elements auf "auto" und macht es zum Popover-Ziel des Umschaltbuttons. Wir setzen anschließend die popoverTargetAction des Buttons auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies anzuzeigen, und blenden das Eingabeelement aus.

if (supportsPopover()) {
  // Set the <div> element to be an auto popover
  popover.popover = "auto";

  // Set the button popover target to be the popover
  toggleBtn.popoverTargetElement = popover;

  // Set that the button toggles popover visibility
  toggleBtn.popoverTargetAction = "toggle";
} else {
  popover.textContent = "Popover API not supported.";
  toggleBtn.hidden = true;
}

Hinweis: Ein Popover-Element ist standardmäßig ausgeblendet, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie üblich" angezeigt.

Sie können das Beispiel unten ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten. Das "Auto"-Popover kann auch leicht verworfen werden, indem Sie außerhalb der Grenzen des Popover-Textes auswählen.

Spezifikationen

Specification
HTML # dom-popovertargetelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

popover HTML-Globalattribut
Popover API