HTMLInputElement: popoverTargetElement プロパティ

Baseline 2024 *

Newly available

Since ⁨April 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

popoverTargetElement はHTMLInputElement インターフェイスのプロパティで、<input> 要素のtype="button" 型で制御されるポップオーバー要素を取得および設定します。

これは JavaScript において HTML のpopovertarget 属性に相当するものです。

例

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.");}

自動ポップオーバーでのポップオーバーの切り替え動作

この例では、popoverTargetAction プロパティに "toggle" 値を設定したポップオーバー API の基本的な使用方法を示します。popover 属性は"auto" に設定されているので、ポップオーバーはポップオーバー領域の外側をクリックすることで閉じられた状態 ("light-dismissed") にすることができます。

まず、ポップオーバーの表示と非表示に使用する<input> と、ポップオーバーとなる<div> を定義します。この場合、プログラムで行うのと同様に、ボタンには HTML のpopovertargetaction 属性を設定しませんし、popover 属性を<div> に設定することもなく、

html

<input type="button" value="ポップオーバーの表示切り替え" /><div>これはポップオーバーのコンテンツです。</div>

JavaScript コードは最初に<div> と<input> 要素のハンドルを取得します。そして、ポップオーバーに対応しているかどうかを調べる関数を定義します。

const popover = document.getElementById("mypopover");const toggleBtn = document.getElementById("toggleBtn");// ポップオーバー API の対応状況を確認function supportsPopover() {  return HTMLElement.prototype.hasOwnProperty("popover");}

ポップオーバー API に対応している場合、コードは<div> 要素のpopover 属性を"auto" に設定し、それをトグルボタンのポップオーバー対象とします。そして、ボタンのpopoverTargetAction を"toggle" に設定します。ポップオーバー API に対応していない場合は、<div> 要素のテキストコンテンツを変更してその状態にし、トグルボタンを非表示にします。

if (supportsPopover()) {  // <div> 要素を自動ポップオーバーに設定  popover.popover = "auto";  // ボタンをポップオーバーの対象に設定  toggleBtn.popoverTargetElement = popover;  // ボタンでポップオーバーの表示状態を切り替えるように設定  toggleBtn.popoverTargetAction = "toggle";} else {  popover.textContent = "ポップオーバー API に対応していません。";  toggleBtn.hidden = true;}

メモ:ポップオーバー要素は既定では非表示ですが、 API に対応していない場合は「通常通り」表示されます。

下記の例を試してみてください。ボタンを切り替えることでポップオーバーを表示させたり、非表示にしたりできます。「自動」ポップオーバーは、ポップオーバーテキストの枠外を選択することで解除することもできます。