Как отключить кнопку отправки и ссылки при нажатии на чистом CSS?

9

Я поставил перед собой задачу создать визуально динамичный и интерактивный опыт только в HTML и CSS (без Javascript). До сих пор я не сталкивался ни с одной необходимой мне функцией, которую не мог бы сделать в чистом CSS и HTML. Этот, возможно, немного сложнее.

Мне нужно , чтобы пользователь с двойного щелчка <a>, <input type="submit">и <button>тегов. Это сделано для того, чтобы они не могли дважды отправить форму или случайно сделать 2 запроса GET на URL. Как это можно сделать в чистом CSS? Даже если мы не можем установить disabledбез JS, должна быть некоторая техника маскирования или комбинация стилей, которые могут справиться с этим здесь в 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>
Развернуть фрагмент

К сожалению, это отключает его до того, как по какой-то причине произойдет фактическое событие нажатия. Может быть, якоря не лучший способ проверить? Я буду продолжать делать дальнейшие попытки.

html css Paragon512
источник
Вы можете заставить форму дать себе класс после того, как она была отправлена ​​в первый раз?
SIGSTACKFAULT
1
Может быть pointer-events: allпо умолчанию, но не в состояниях: active или: focus? Как установить pointer-events: noneдля этих государств?
Джереми Харрис
возможно в el:active, el:focusсочетании с указателями-событиями
Paragon512
Это работает? : active {display: none; // например}
MD Hesari
Добавлена ​​попытка. Это отключило его, прежде чем выстрелить, хотя.
Paragon512

Ответы:

4

Одна идея состоит в том, чтобы иметь слой, который появляется сверху элемента после первого щелчка, чтобы избежать второго.

Вот основная идея, где я буду рассматривать продолжительность 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>
Развернуть фрагмент

Темани Афиф
источник
1
кажется, не работает с <a>тегом
Александр Белугин
@ АлександрБелугин работает нормально, проверьте обновление. Может быть, вы сделали что-то не так
Темани Афиф
Я думаю, что это все еще позволяет мне нажать кнопку 2 раза? Я вижу, как кнопка нажимается во второй раз.
Paragon512
1
@TemaniAfif, когда я делаю это, <a href="#" onclick="console.log('lalala')">Click me</a>чтобы связать с остальным кодом ничего не регистрируется в консоли. imho значит ссылка не нажата
Александр Белугин
1
Похоже, лучший способ проверить это с <a>тегом. Я пробовал тестировать с помощью кнопок отправки, но мониторинг сетевого инспектора странный и противоречивый. Когда я нажимаю на ссылку, она не срабатывает. Если вы установите цель для привязки и нажмете ссылку, она отключит ссылку, но не перейдет к привязке.
Paragon512
0

Первое решение

Идея состоит в том, чтобы использовать radio buttonсостояние :checkedдля внесения изменений. Мы прячемся radioкруг и когда :checkedдля <a>макияжа pointer-events: none;и для buttonsс различными типами мы прячем их и показать disabledте.

div {
  margin: 10px;
}

#radio0, .my-checkbox {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

#radio0 + a label {
  cursor: pointer;
}

#radio0:checked+a {
  pointer-events: none;
}

.btn-one,
.btn-two {
  padding: 0;
}

.btn-one>label,
.btn-two>label {
  padding: 1px 6px;
}

.my-checkbox:checked+.btn-one {
  display: none;
}

.btn-two {
  display: none;
}

.my-checkbox:checked+.btn-one+.btn-two {
  display: inline-block;
}
<div>
  <input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
  <a href="#">
    <label for="radio0">
        Click the link!
      </label>
  </a>
</div>

<div>
  <input type="radio" id="radio1" class="my-checkbox">
  <button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
      <label for="radio1">Click the button!</label>
    </button>
  <button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
        <label for="radio1">Click the button!</label>
      </button>
</div>

<div>
  <input type="radio" id="radio2" class="my-checkbox">
  <button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
    <label for="radio2">Submit!</label>
  </button>
  <button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
      <label for="radio2">Submit!</label>
    </button>
</div>
Развернуть фрагмент

Второе решение

Этот подходит для links. Идея состоит в том, чтобы использовать :target. elementВо-первых, цель скрыта. Тогда, когда целевое использование :targetдля pointer-events: none;оф <a>.

Показать фрагмент кода

Александр Белугин
источник