HTMLInputElement: popoverTargetElement 属性

基线 2024

新功能

自 2024 年 4 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

popoverTargetElement 属性是 HTMLInputElement 接口的一部分，用于获取和设置通过 type="button" 的 <input> 元素控制的弹出窗口元素。

它是 popovertarget HTML 属性的 JavaScript 等效项。

值

对 DOM 中弹出窗口元素的引用。

示例

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