新しいdetails
タグをAと組み合わせて使用する場合summary
、生成された入力を無効にします。と思った
<details open disabled>
トリックを行うことができますが、残念ながらそれは機能しません。
詳細要素を無効にするにはどうすればよいですか?
新しいdetails
タグをAと組み合わせて使用する場合summary
、生成された入力を無効にします。と思った
<details open disabled>
トリックを行うことができますが、残念ながらそれは機能しません。
詳細要素を無効にするにはどうすればよいですか?
存在しない属性を使用する代わりにdisabled
、要素にクリック ハンドラーを設定し、<details>
そこからデフォルトのイベント動作を防ぐことができます。手早く汚い方法は次のとおりです。
<details open onclick="return false">
<summary>Click here</summary>
<p>content</p>
</details>
それを行う適切な方法は、次を使用することですaddEventListener
:
<details id="mydetails" open>
<summary>Click here</summary>
<p>content</p>
</details>
<script>
document.getElementById('mydetails').addEventListener('click', function(e) {
e.preventDefault();
});
</script>
コメントで言及したフォーカスの問題を解決するにはtabindex="-1"
、属性として追加して、<summary>
キーボード フォーカスを取得できないようにします。それがすべてのブラウザーで機能するかどうかはわかりませんがfocus
、属性を使用してもクリック時にイベントがトリガーされることに注意してください。
デフォルトの動作を防ぐために false を返すことができると思います:
<details open="" onclick="return false;">
<p>Hello</p></details>