Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/API/HTMLInputElement/popoverTargetElement below:

HTMLInputElement: popoverTargetElement-Eigenschaft - Web-APIs | MDN

Dieses Beispiel zeigt die grundlegende Verwendung der Popover-API, indem ein <div>-Element als Popover festgelegt wird und dann als popoverTargetElement eines <input> vom Typ button gesetzt wird. Das popover-Attribut ist auf "auto" gesetzt, so dass das Popover durch Klicken außerhalb des Popover-Bereichs geschlossen („light-dismissed“) werden kann.

Zuerst definieren wir ein <input>, das zum Anzeigen und Verstecken des Popovers verwendet wird, und ein <div>, das das Popover sein wird. In diesem Fall setzen wir weder das popovertargetaction-HTML-Attribut auf dem <input> noch das popover-Attribut auf dem <div>, da wir dies programmatisch tun werden.

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

Der JavaScript-Code erhält zunächst einen Handle auf die <div>- und <input>-Elemente. Dann wird eine Funktion definiert, um die Unterstützung der 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 <div>-Elements auf "auto" und macht es zum Popover-Ziel des Umschalt-Buttons. Wir setzen dann die popoverTargetAction des Buttons auf "toggle". Falls die Popover-API nicht unterstützt wird, ändern wir den Textinhalt des <div>-Elements, um dies anzugeben, und verstecken 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 ausgeblendet, aber wenn die API nicht unterstützt wird, wird Ihr Element "wie gewohnt" angezeigt.

Sie können das Beispiel unten ausprobieren. Zeigen und verstecken Sie das Popover, indem Sie den Button umschalten. Das "auto"-Popover kann auch durch Auswahl außerhalb der Begrenzungen des Popover-Textes light-dismissed werden.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4