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。