HTMLInputElement: popoverTargetElement-Eigenschaft

Die popoverTargetElement-Eigenschaft des HTMLInputElement-Interfaces ruft das Popover-Element ab und legt es fest, das über ein <input>-Element vom type="button" gesteuert werden soll.

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

Wert

Eine Referenz zu einem 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 festgelegt und 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 ("light-dismissed") werden kann.

Zuerst definieren wir ein <input>, das wir verwenden, um das Popover anzuzeigen und zu verbergen, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir das popovertargetaction HTML-Attribut nicht auf das <input> oder das popover Attribut auf das <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 zuerst einen Handle auf die <div>- und <input>-Elemente. Dann definiert er eine Funktion, um die Unterstützung für Popovers zu prü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 Umschaltknopfes. Wir setzen dann die popoverTargetAction des Knopfes auf "toggle". Wenn die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies anzuzeigen, und verbergen das Eingabeelement.

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 verborgen, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie gewohnt" angezeigt.

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

Spezifikationen

Specification
HTML Standard # dom-popovertargetelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

popover HTML globales Attribut
Popover API