10

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

<details open disabled>

可以做到这一点,但遗憾的是它不起作用。

如何禁用详细信息元素?

4

4 回答 4

8

一个非常简单的方法是只使用 CSS。如果您愿意,您仍然可以使用该disabled属性或将其改为 a 。class设置为时的pointer-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

于 2020-08-01T15:59:45.340 回答
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 回答
-2
<details class="mydetails" open>
<summary>Click here</summary>
<p>content</p></details>

$(".mydetails").click(function(event) {event.preventDefault();});
于 2017-01-09T21:53:59.647 回答