HTMLInputElement: popoverTargetElement 屬性

Baseline 2024 *

新推出

自 ⁨2024 年 4 月⁩ 起，此功能可在最新的裝置和瀏覽器版本中執行。此功能可能不適用於較舊的裝置或瀏覽器。

* 此特性的某些部分可能存在不同級別的支援。

HTMLInputElement 介面的 popoverTargetElement 屬性用於獲取和設定透過 type="button" 的 <input> 元素來控制的彈出框元素。

它是 popovertarget HTML 屬性的 JavaScript 等效項。

使用 popoverTargetElement 屬性在彈出框與其呼叫按鈕之間建立關係，還有兩個額外的有用效果。

瀏覽器在彈出視窗和呼叫者之間建立隱式的 aria-details 和 aria-expanded 關係，並在顯示時將彈出視窗放置在鍵盤焦點導航順序中的邏輯位置。這使得彈出視窗對鍵盤和輔助技術 (AT) 使用者更易於訪問（另請參閱彈出可訪問性功能）。
瀏覽器在兩者之間建立了一個隱式錨點引用，使得使用 CSS 錨點定位來相對於其控制元件定位彈出視窗非常方便。有關更多詳細資訊，請參閱彈出錨點定位。

值

DOM 中彈出框元素的引用。

示例

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "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.");
}

本示例展示了彈出框 API 的基本用法，將一個 <div> 元素設定為彈出框，然後將其設定為 type="button" 的 <input> 元素的 popoverTargetElement。popover 屬性被設定為 "auto"，因此可以透過點選彈出框區域外部來關閉彈出框（“輕拂關閉”）。

首先，我們定義一個 <input> 元素，我們將用它來顯示和隱藏彈出框，以及一個 <div> 元素，它將是彈出框。在這種情況下，我們沒有在 <input> 元素上設定 popovertargetaction HTML 屬性，也沒有在 <div> 元素上設定 popover 屬性，因為我們將透過程式設計方式進行設定。

html

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

JavaScript 程式碼首先獲取對 <div> 和 <input> 元素的引用。然後它定義了一個函式來檢查彈出框支援情況。

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

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

如果支援彈出框 API，程式碼會將 <div> 元素的 popover 屬性設定為 "auto"，並使其成為切換按鈕的彈出框目標。然後我們將按鈕的 popoverTargetAction 設定為 "toggle"。如果不支援彈出框 API，我們將 <div> 元素的文字內容更改為說明這一點，並隱藏輸入元素。

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;
}

注意： popover 元素預設是隱藏的，但如果 API 不受支援，您的元素將“按原樣”顯示。

您可以在下方嘗試示例。透過切換按鈕來顯示和隱藏彈出框。“auto”彈出框也可以透過點選彈出框文字範圍之外的區域進行“輕拂關閉”。