10

新しいdetailsタグをAと組み合わせて使用​​する場合summary、生成された入力を無効にします。と思った

<details open disabled>

トリックを行うことができますが、残念ながらそれは機能しません。

詳細要素を無効にするにはどうすればよいですか?

4

4 に答える 4

7

存在しない属性を使用する代わりに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>

http://jsfiddle.net/L8HUZ/1/

コメントで言及したフォーカスの問題を解決するにはtabindex="-1"、属性として追加して、<summary>キーボード フォーカスを取得できないようにします。それがすべてのブラウザーで機能するかどうかはわかりませんがfocus、属性を使用してもクリック時にイベントがトリガーされることに注意してください。

于 2012-11-28T12:36:34.207 に答える
3

デフォルトの動作を防ぐために false を返すことができると思います:

<details open="" onclick="return false;">
<p>Hello</p></details>
于 2012-11-28T12:37:17.700 に答える