gpt4 book ai didi

javascript - 禁用详细信息/摘要

转载 作者:搜寻专家 更新时间:2023-10-31 08:20:10 29 4
gpt4 key购买 nike

当我将新的 details 标签与 summary 结合使用时,我想禁用生成的输入。我以为

<details open disabled>

可以解决这个问题,但遗憾的是它不起作用。

如何禁用细节元素?

最佳答案

一个非常简单的方法是只使用 CSS。如果您愿意,您仍然可以使用 disabled 属性或将其设为 classpointer-events设置为 none 时的声明使 summary 标签对鼠标不可见(标签下方的元素因此可以点击。) 添加了 tabindex="-1"summary 标签,用于禁用的标签,以消除键盘焦点。

<details open disabled>
<summary tabindex="-1">click here: [disabled]</summary>
<p>content</p>
</details>

<details open class="disabled">
<summary tabindex="-1">click here: .disabled</summary>
<p>content</p>
</details>

<details open>
<summary>click here: NOT disabled</summary>
<p>content</p>
</details>

<style>
details[disabled] summary,
details.disabled summary {
pointer-events: none; /* prevents click events */
user-select: none; /* prevents text selection */
}
</style>

https://codepen.io/joelnagy/pen/MWKNGGp

关于javascript - 禁用详细信息/摘要,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13604788/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com