HTMLElement: showPopover() ã¡ã½ãã
Baseline
2024
æè¿å©ç¨å¯è½
April 2024以éããã®æ©è½ã¯ææ°ã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã³ãã©ã¦ã¶ã¼ã§åä½ãã¾ããå¤ã端æ«ããã©ã¦ã¶ã¼ã§ã¯åä½ããªããã¨ãããã¾ãã
showPopover() 㯠HTMLElement ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ã¡ã½ããã§ãããããªã¼ãã¼è¦ç´ ï¼ããªãã¡æå¹ãª popover 屿§ãããè¦ç´ ï¼ãæä¸ä½ã¬ã¤ã¤ã¼ã«è¿½å ãããã¨ã§è¡¨ç¤ºãã¾ãã
showPopover() ã popover 屿§ã®ã¤ããç¾å¨é表示ã®è¦ç´ ã«å¯¾ãã¦å¼ã³åºãããå ´åãbeforetoggle ã¤ãã³ããçºè¡ãããç¶ãã¦ããããªã¼ãã¼ã表示ããããããã toggle ã¤ãã³ããçºè¡ããã¾ããè¦ç´ ãæ¢ã«è¡¨ç¤ºä¸ã§ããã°ãã¨ã©ã¼ãçºçãã¾ãã
æ§æ
showPopover()
弿°
ãªãã
è¿å¤
ãªã (undefined)ã
ä¾å¤
InvalidStateErrorDOMException-
ãã®ããããªã¼ãã¼ãæ¢ã«è¡¨ç¤ºä¸ã®å ´åã«çºçãã¾ãã
ä¾
次ã®ä¾ã§ã¯ããã¼ãã¼ãã®ç¹å®ã®ãã¼ãæ¼ããã¨ã§ãããããªã¼ãã¼ã表示ããæ©è½ãæä¾ãã¾ãã
æåã« HTML ã§ãã
<div id="mypopover" popover>
<h2>Help!</h2>
<p>You can use the following commands to control the app</p>
<ul>
<li>Press <ins>C</ins> to order cheese</li>
<li>Press <ins>T</ins> to order tofu</li>
<li>Press <ins>B</ins> to order bacon</li>
<hr />
<li>Say "Service" to summon the robot waiter to take your order</li>
<li>Say "Escape" to engage the ejector seat</li>
</ul>
</div>
ããã¦æ©è½ãã¤ãªãã JavaScript ã§ãã
const popover = document.getElementById("mypopover");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
popover.showPopover();
}
});
仿§æ¸
| 仿§æ¸ |
|---|
| HTML > # dom-showpopover > |