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”弹出框也可以通过点击弹出框文本范围之外的区域进行“轻拂关闭”。