Jak wyłączyć przycisk przesyłania i łącza po kliknięciu w czystym CSS?

Rzuciłem sobie wyzwanie, aby stworzyć wizualnie dynamiczną i interaktywną obsługę tylko w HTML i CSS (bez Javascript). Jak dotąd nie spotkałem się z żadną potrzebną funkcją, której nie mogłem zrobić w czystym CSS i HTML. Ten jest może nieco trudniejszy.

Muszę uniemożliwi użytkownikowi podwójne kliknięcie <a>, <input type="submit">i <button>tagów. Zapobiega to podwójnemu przesłaniu formularza lub przypadkowemu wysłaniu 2 żądań GET do adresu URL. Jak można to zrobić w czystym CSS? Nawet jeśli nie możemy ustawić disabledbez JS, powinna istnieć jakaś technika maskowania lub połączenie stylów, które poradzą sobie tutaj w 2020 roku.

Oto prosty przykład próby:

.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>

Rozwiń fragment kodu

Niestety powoduje to wyłączenie z jakiegoś powodu faktycznego zdarzenia kliknięcia. Może kotwice nie są najlepszym sposobem na przetestowanie? Będę kontynuował próby.

html css Paragon512
źródło

czy możesz sprawić, aby formularz dał sobie klasę po przesłaniu go po raz pierwszy?

SIGSTACKFAULT

Może pointer-events: alldomyślnie, ale nie w stanach: aktywny lub: fokus? Jak ustawione pointer-events: nonedla tych stanów?

Jeremy Harris

może w el:active, el:focuspołączeniu ze zdarzeniami wskaźnikowymi

Paragon512

czy to działa? : active {display: none; // na przykład}

MD Hesari

Dodano próbę. Wyłączyło to jednak przed uruchomieniem kliknięcia.

Paragon512

Odpowiedzi:

Jednym z pomysłów jest posiadanie warstwy, która pojawia się na górze elementu po pierwszym kliknięciu, aby uniknąć drugiego.

Oto podstawowy pomysł, w którym rozważę czas 1spomiędzy dwoma kliknięciami, który możesz zmniejszyć. Spróbuj kliknąć przycisk / link, a zauważysz, że możesz kliknąć ponownie dopiero później 1s.

Dodałem małą nakładkę, aby lepiej zobaczyć sztuczkę

.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>

Rozwiń fragment kodu

Temani Afif
źródło

wydaje się, że nie działa z <a>tagiem

Aleksandr Belugin

@AleksandrBelugin działa dobrze, sprawdź aktualizację. Może zrobiłeś coś złego

Temani Afif

Myślę, że nadal pozwala mi kliknąć przycisk 2 razy? Za drugim razem widzę przycisk wciśnięty.

Paragon512

@TemaniAfif, gdy robię to, <a href="#" onclick="console.log('lalala')">Click me</a>aby połączyć się z resztą kodu, nic nie loguje się na konsolę. imho oznacza to, że link nie został kliknięty

Aleksandr Belugin

Wygląda na to, że najlepszym sposobem na sprawdzenie tego jest <a>tag. Próbowałem testować za pomocą przycisków przesyłania, ale monitorowanie inspektora sieci jest dziwne i niespójne. Kiedy klikam link, nie uruchamia kliknięcia. Jeśli ustawisz cel na kotwicę i klikniesz link, spowoduje to wyłączenie linku, ale nie przejdzie do kotwicy.

Paragon512

Pierwsze rozwiązanie

Chodzi o to, aby użyć radio buttonstanu przez :checkeddo modyfikacji. Chowamy radiokoło i gdy :checkeddla <a>marki pointer-events: none;i dla buttonsz różnymi rodzajami je ukrywać i pokazywać disabledte.

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>

Rozwiń fragment kodu

Drugie rozwiązanie

Ten pasuje do links. Chodzi o to, aby użyć :target. Targe elementjest najpierw ukryty. Wtedy, gdy jest ukierunkowane wykorzystanie :targetdo pointer-events: none;z <a>.

Pokaż fragment kodu

#anchor {
  display: none;
}

#anchor:target {
  display: block;
}

#anchor:target+a {
  pointer-events: none;
}

<div>
  <span id="anchor"></span>
  <a href="#anchor" onclick="console.log('anchor clicked!')">Click the link!</a>
</div>

Rozwiń fragment kodu

Aleksandr Belugin
źródło