当我将新details
标记与summary
结合使用时,我想要禁用生成的输入。我以为
<details open disabled>
可以做到这一点,但遗憾的是它不起作用。
如何禁用详细信息元素?
答案 0 :(得分:3)
您可以在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
事件。
答案 1 :(得分:2)
我猜你可以返回false以防止默认行为:
<details open="" onclick="return false;">
<p>Hello</p></details>
答案 2 :(得分:0)
一种非常简单的方法是仅使用CSS。如果愿意,您仍然可以使用disabled
属性或将其设为class
。 pointer-events
声明设置为none
时,summary
标签对鼠标不可见(因此,该标签下方的元素可以单击。)
<details open disabled>
<summary>click here</summary>
<p>content</p>
</details>
<details open class="disabled">
<summary>click here</summary>
<p>content</p>
</details>
<style>
details[disabled] summary,
details.disabled summary {
pointer-events: none; /* prevents click events */
}
</style>
答案 3 :(得分:-1)
<details class="mydetails" open>
<summary>Click here</summary>
<p>content</p></details>
$(".mydetails").click(function(event) {event.preventDefault();});