“input”要素~“popovertargetaction”属性

“popovertargetaction”属性について

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

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

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

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

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

指定できる値

サンプルコード

<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円もの税金が課されていました。知っていましたか？