Come disabilitare il pulsante di invio e i collegamenti su clic in puro CSS?

Mi sono sfidato a creare un'esperienza visivamente dinamica e interattiva solo in HTML e CSS (No Javascript). Finora, non ho trovato nessuna caratteristica di cui avevo bisogno che non potevo fare in puro CSS e HTML. Questo è forse un po 'più difficile.

Ho bisogno di impedire all'utente di doppio clic <a>, <input type="submit">e <button>tag. Questo per impedire loro di inviare due volte un modulo o di fare accidentalmente 2 richieste GET a un URL. Come può essere fatto in puro CSS? Anche se non possiamo impostare disabledsenza JS, ci dovrebbero essere alcune tecniche di mascheramento o una combinazione di stili che possono gestirlo qui nel 2020.

Ecco un semplice esempio di un tentativo:

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

Espandi frammento

Sfortunatamente, questo lo disabilita prima che venga attivato l'evento click effettivo per qualche motivo. Forse le ancore non sono il modo migliore per testare? Continuerò a fare ulteriori tentativi.

html css

— Paragon512
fonte

puoi fare in modo che il modulo si dia una classe dopo che è stato inviato la prima volta?

— SIGSTACKFAULT

Forse pointer-events: allper impostazione predefinita, ma non negli stati: attivo o: focus? Come impostato pointer-events: noneper quegli stati?

— Jeremy Harris,

forse el:active, el:focuscombinato con eventi puntatore

— Paragon512

funziona? : attivo {display: nessuno; // per esempio}

— MD Hesari,

Aggiunto tentativo. Lo ha disabilitato prima di sparare il clic però.

— Paragon512,

Risposte:

Un'idea è quella di avere un livello che si trova nella parte superiore dell'elemento dopo il primo clic per evitare il secondo.

Ecco un'idea di base in cui prenderò in considerazione una durata 1scompresa tra due clic che è possibile ridurre. Prova a fare clic sul pulsante / collegamento e noterai che puoi fare nuovamente clic solo dopo 1s.

Sto aggiungendo un piccolo overlay per vedere meglio il trucco

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

Espandi frammento

— Temani Afif
fonte

sembra non funzionare con il <a>tag

— Aleksandr Belugin il

@AleksandrBelugin funziona bene, controlla l'aggiornamento. Forse hai fatto qualcosa di sbagliato

— Temani dopo il

Penso che mi permetta ancora di fare clic sul pulsante 2 volte? Vedo il pulsante premuto la seconda volta.

— Paragon512,

@TemaniAfif quando lo faccio <a href="#" onclick="console.log('lalala')">Click me</a>per collegarmi con il resto del codice, nulla accede alla console. imho significa che non si fa clic sul collegamento

— Aleksandr Belugin,

Sembra che il modo migliore per testarlo sia con il <a>tag. Ho provato a provare con i pulsanti di invio, ma il monitoraggio dell'ispettore di rete è strano e incoerente. Quando faccio clic sul collegamento, non attiva il clic. Se si imposta un target su un'ancora e si fa clic sul collegamento, questo disabiliterà il collegamento ma non salterà all'ancora.

— Paragon512,

La prima soluzione

L'idea è di utilizzare lo radio buttonstato :checkedper apportare modifiche. Nascondiamo il radiocerchio e quando :checkedper <a>make pointer-events: none;e per buttonscon diversi tipi li nascondiamo e mostriamo disabledquelli.

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>

Espandi frammento

La seconda soluzione

Questo è adatto per links. L'idea è di usare :target. Targe elementè nascosto innanzitutto. Poi, quando si rivolge l'uso :targetdi pointer-events: none;di <a>.

Mostra snippet di codice

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

Espandi frammento

— Aleksandr Belugin
fonte