HTMLInputElement: popoverTargetAction 屬性

Baseline 2024

新推出

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

HTMLInputElement 介面的 popoverTargetAction 屬性用於獲取和設定在由 type="button" 的 <input> 元素控制的 popover 元素上要執行的操作（"hide"、"show" 或 "toggle"）。

它反映了 popovertargetaction HTML 屬性的值。

值

這是一個列舉值。可能的值有：

"hide": 按鈕將隱藏已顯示的彈出視窗。如果您嘗試隱藏已隱藏的彈出視窗，則不會採取任何操作。
"show": 按鈕將顯示隱藏的彈出視窗。如果您嘗試顯示已顯示的彈出視窗，則不會採取任何操作。
"toggle": 按鈕將使 popover 在顯示和隱藏之間切換。如果 popover 處於隱藏狀態，它將被顯示；如果 popover 處於顯示狀態，它將被隱藏。如果未設定 popoverTargetAction，"toggle" 是控制元件按鈕將執行的預設操作。

示例

此示例展示了 popover API 的基本用法，其中 popoverTargetAction 屬性設定為 "toggle" 值。popover 屬性設定為 "auto"，因此可以透過點選 popover 區域外部來關閉 popover（“游標關閉”）。

首先，我們定義一個 type="button" 的 <input> 元素，我們將用它來顯示和隱藏 popover，以及一個 <div> 元素，它將成為 popover。在此情況下，我們不設定按鈕上的 popovertargetaction HTML 屬性或 <div> 上的 popover 屬性，因為我們將透過程式設計方式設定它們。

html

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

JavaScript 程式碼首先獲取對 <div> 和 <input> 元素的控制代碼。然後定義一個函式來檢查 popover 支援情況。

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

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

如果支援 popover API，程式碼會將 <div> 元素的 popover 屬性設定為 "auto"，並使其成為切換按鈕的 popover 目標。然後我們將按鈕的 popoverTargetAction 設定為 "toggle"。如果不支援 popover 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 不受支援，您的元素將“按原樣”顯示。

您可以嘗試下面的示例。透過切換按鈕來顯示和隱藏 popover。您還可以透過在 popover 文字邊界外部進行選擇來關閉“自動”popover。

此示例演示瞭如何使用 popoverTargetAction 屬性的 "show" 和 "hide" 值。

程式碼與前面的示例幾乎相同，只是有兩個 <button> 元素，並且 popover 設定為 "manual"。manual popover 必須顯式關閉，而不能透過在 popover 區域外部進行選擇來“游標關閉”。

html

<input id="showBtn" type="button" value="Show popover" />
<input id="hideBtn" type="button" value="Hide popover" />
<div id="mypopover">This is popover content!</div>

function supportsPopover() {
  return Object.hasOwn(HTMLElement.prototype, "popover");
}

const popover = document.getElementById("mypopover");
const showBtn = document.getElementById("showBtn");
const hideBtn = document.getElementById("hideBtn");

const popoverSupported = supportsPopover();

if (supportsPopover()) {
  // Set the <div> element be a manual popover
  popover.popover = "manual";

  // Set the button targets to be the popover
  showBtn.popoverTargetElement = popover;
  hideBtn.popoverTargetElement = popover;

  // Set the target actions to be show/hide
  showBtn.popoverTargetAction = "show";
  hideBtn.popoverTargetAction = "hide";
} else {
  popover.textContent = "Popover API not supported.";
  showBtn.hidden = true;
  hideBtn.hidden = true;
}

可以透過選擇“顯示 popover”按鈕來顯示 popover，並使用“隱藏 popover”按鈕來隱藏 popover。