このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“popovertargetaction”属性HTML Living Standardで追加

記事Mar.10th, 2023
ポップオーバー要素の表示の切り替え方法を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

popovertargetaction”属性について

popovertargetaction”属性はinput”要素をクリックしたときにポップオーバー要素の表示状態をどのように切り替えるかを指定します。表示状態を切り替えるポップオーバー要素はpopovertarget”属性によって指定されます。

値が“show”の場合は非表示状態のポップオーバーを表示状態に、“hide”の場合は表示状態のポップオーバー要素を非表示状態にします。

値が“toggle”の場合は非表示状態から表示状態の切り替えと、表示状態から非表示状態の切り替えを1個のinput”要素で行うことができます。

popovertargetaction”属性を省略した場合や値が無効な場合は“toggle”として扱われます。

popovertargetaction”属性はinput”要素に指定されたtype”属性の値がsubmitimageresetbuttonのいずれかの場合のみ指定することができます。

指定できる値

属性値 説明
toggle ポップオーバー要素の表示状態を切り替える
show ポップオーバー要素を表示する
hide ポップオーバー要素を閉じる

サンプルコード

<p>
<input type="button" value="開く" popovertarget="pop" popovertargetaction="show">
<input type="button" value="閉じる" popovertarget="pop" popovertargetaction="hide">
</p>

<div popover="manual" id="pop">
<p>東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか?</p>
</div>

東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか?

<p>
<input type="button" value="開く/閉じる" popovertarget="pop" popovertargetaction="toggle">
</p>

<div popover="manual" id="pop">
<p>東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか?</p>
</div>

東京ではウサギの飼育に高額の税金がかけられていたことがあります。巡査の初任給が6円だった時代にウサギ1羽につき毎月1円もの税金が課されていました。知っていましたか?

一番上へ