时间戳

首页 > 解决方案 > 如何在纯 CSS 中禁用提交按钮和点击链接？

html - 如何在纯 CSS 中禁用提交按钮和点击链接？

问题描述

我挑战自己，只用 HTML 和 CSS（无 Javascript）创建视觉上的动态和交互体验。到目前为止，我还没有遇到在纯 CSS 和 HTML 中无法实现的任何我需要的功能。这一个可能有点困难。

我需要防止用户双击<a>,<input type="submit">和<button>标签。这是为了防止他们重复提交表单或意外向 URL 发出 2 次 GET 请求。这如何在纯 CSS 中完成？即使没有JS我们不能设置disabled，2020年这里应该有一些遮罩技术或样式组合可以处理它。

这是一个简单的尝试示例：

.clicky:focus{
  display: none;
  pointer-events: none;
}
<a href="#down" class="clicky">test</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="down">target</p>

不幸的是，由于某种原因，这会在实际点击事件被触发之前禁用它。也许锚不是最好的测试方法？我会继续做进一步的尝试。

标签： htmlcss

解决方案

一个想法是在第一次单击后在元素顶部设置一个图层，以避免第二次单击。

这是一个基本想法，我将考虑1s可以减少两次点击之间的持续时间。尝试单击按钮/链接，您会注意到您只能在1s.

我正在添加一个小叠加层以更好地了解技巧

.button {
  position:relative;
  display:inline-block;
}
.button span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:100%;
  z-index:-1;
  animation:overlay 1s 0s; /* Update this value to adjust the duration */
  transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}


.button *:active + span {
  animation:none;
  bottom:0;
  transition:0s 0s;
}

@keyframes overlay {
  0%,100% {
    z-index:999;
    background:rgba(255,0,0,0.2); /* To illustrate */
  }
}
<div class="button">
  <button>Click me</button>
  <span></span>
</div>

<div class="button">
  <a href="#" onclick="console.log('clicked !')">Click me</a>
  <span></span>
</div>

推荐阅读