HTMLInputElement: popoverTargetAction-Eigenschaft

Baseline 2024

Newly available

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

Die popoverTargetAction-Eigenschaft der HTMLInputElement-Schnittstelle ruft die Aktion ab bzw. legt diese fest, die auf ein Popover-Element angewendet werden soll ("hide", "show" oder "toggle"), das durch ein -Element vom Typ type="button" gesteuert wird.

Sie spiegelt den Wert des popovertargetaction-HTML-Attributs wider.

Wert

Ein enumerierter Wert. Mögliche Werte sind:

"hide": Der Button wird ein gezeigtes Popover ausblenden. Wenn Sie versuchen, ein bereits ausgeblendetes Popover auszublenden, wird keine Aktion ausgeführt.
"show": Der Button wird ein ausgeblendetes Popover anzeigen. Wenn Sie versuchen, ein bereits angezeigtes Popover anzuzeigen, wird keine Aktion ausgeführt.
"toggle": Der Button wird ein Popover zwischen Anzeige und Ausblenden umschalten. Wenn das Popover ausgeblendet ist, wird es angezeigt; wenn das Popover angezeigt wird, wird es ausgeblendet. Wenn popoverTargetAction nicht gesetzt ist, ist "toggle" die Standardaktion, die vom Steuer-Button ausgeführt wird.

Beispiele

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API mit einem auf "toggle" gesetzten Wert für die popoverTargetAction-Eigenschaft. Das popover-Attribut ist auf "auto" gesetzt, sodass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen ("light-dismissed") werden kann.

Zuerst definieren wir ein vom type="button", das wir verwenden, um das Popover anzuzeigen und auszublenden, und ein

, das das Popover sein wird. In diesem Fall setzen wir das popovertargetaction-HTML-Attribut nicht auf den Button oder das popover-Attribut auf das

, da wir dies programmatisch tun werden.

html


This is popover content!

Der JavaScript-Code erhält zuerst eine Referenz auf die

- und -Elemente. Er definiert dann eine Funktion, um die Unterstützung für das Popover zu überprüfen.

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

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

Wenn die Popover-API unterstützt wird, setzt der Code das popover-Attribut des

-Elements auf "auto" und macht es zum Popover-Ziel des Umschaltbuttons. Wir setzen dann die popoverTargetAction des Buttons auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des

-Elements, um dies anzuzeigen, und blenden den Umschaltbutton aus.

if (supportsPopover()) {
  // Set the  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 gewohnt" angezeigt.

Sie können das folgende Beispiel ausprobieren. Zeigen und verbergen Sie das Popover, indem Sie den Button umschalten. Das "auto"-Popover kann auch durch Auswahl außerhalb der Grenzen des Popover-Textes geschlossen werden.

Dieses Beispiel zeigt, wie die "show"- und "hide"-Werte der popoverTargetAction-Eigenschaft verwendet werden.

Der Code ist nahezu identisch mit dem vorherigen Beispiel, außer dass es zwei

Spezifikationen

Specification
HTML # dom-popovertargetaction

Browser-Kompatibilität

Siehe auch

popover-HTML-Globalattribut
Popover API