Wie deaktiviere ich die Schaltfläche "Senden" und Links beim Klicken in reinem CSS?

Ich habe mich herausgefordert, eine visuell dynamische und interaktive Erfahrung nur in HTML und CSS (kein Javascript) zu schaffen. Bisher bin ich auf keine Funktion gestoßen, die ich in reinem CSS und HTML nicht ausführen konnte. Dieser ist vielleicht etwas schwieriger.

Ich brauche den Benutzer aus einem Doppelklick zu verhindern <a>, <input type="submit">und <button>Tags. Dies soll verhindern, dass sie ein Formular doppelt senden oder versehentlich 2 GET-Anforderungen an eine URL senden. Wie geht das in reinem CSS? Auch wenn wir disabledohne JS nicht einstellen können, sollte es eine Maskierungstechnik oder eine Kombination von Stilen geben, die hier im Jahr 2020 damit umgehen können.

Hier ist ein einfaches Beispiel für einen Versuch:

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

Erweitern Sie das Snippet

Leider wird dies deaktiviert, bevor das eigentliche Klickereignis aus irgendeinem Grund ausgelöst wird. Vielleicht sind Anker nicht der beste Weg, um zu testen? Ich werde weitere Versuche machen.

html css Paragon512
quelle

Können Sie das Formular dazu bringen, sich selbst eine Klasse zu geben, nachdem es das erste Mal eingereicht wurde?

SIGSTACKFAULT

Möglicherweise pointer-events: allstandardmäßig, aber nicht in den Zuständen: active oder: focus? Wie pointer-events: nonefür diese Staaten eingestellt?

Jeremy Harris

möglicherweise el:active, el:focuskombiniert mit

Zeigerereignissen

Funktioniert das? : active {display: none; // zum Beispiel}

MD Hesari

Versuch hinzugefügt. Es wurde jedoch deaktiviert, bevor der Klick ausgelöst wurde.

Paragon512

Antworten:

Eine Idee ist, eine Ebene zu haben, die nach dem ersten Klick oben auf dem Element angezeigt wird, um die zweite zu vermeiden.

Hier ist eine Grundidee, bei der ich eine Dauer 1szwischen zwei Klicks berücksichtigen werde , die Sie verringern können. Wenn Sie versuchen, auf die Schaltfläche / den Link zu klicken, werden Sie feststellen, dass Sie erst danach erneut klicken können 1s.

Ich füge eine kleine Überlagerung hinzu, um den Trick besser zu sehen

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

Erweitern Sie das Snippet

Temani Afif
quelle

es scheint nicht mit <a>Tag zu funktionieren

Aleksandr Belugin

@AleksandrBelugin es funktioniert gut, überprüfen Sie das Update. Vielleicht hast du etwas falsch gemacht

Temani Afif

Ich denke, es lässt mich immer noch 2 Mal auf den Button klicken? Ich kann sehen, wie der Knopf das zweite Mal gedrückt wird.

Paragon512

@TemaniAfif Wenn ich dies tue <a href="#" onclick="console.log('lalala')">Click me</a>, um mit dem Rest des Codes zu verknüpfen, protokolliert nichts an der Konsole. Imho bedeutet es, dass der Link nicht angeklickt wird

Aleksandr Belugin

Es sieht so aus, als ob der beste Weg, dies zu testen, das <a>Tag ist. Ich habe versucht, mit Senden-Schaltflächen zu testen, aber die Überwachung des Netzwerkinspektors ist seltsam und inkonsistent. Wenn ich auf den Link klicke, wird der Klick nicht ausgelöst. Wenn Sie ein Ziel auf einen Anker setzen und auf den Link klicken, wird der Link deaktiviert, aber nicht zum Anker gesprungen.

Paragon512

Die erste Lösung

Die Idee ist, radio buttonstate by :checkedzu verwenden, um Änderungen vorzunehmen. Wir verstecken radioKreise und wann :checkedfür <a>machen pointer-events: none;und für buttonsmit verschiedenen Typen verstecken wir sie und zeigen sie 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>

Erweitern Sie das Snippet

Die zweite Lösung

Dieser passt für links. Die Idee ist zu verwenden :target. Targe elementwird zuerst versteckt. Dann , wenn verwendet man gezielt :targetauf pointer-events: none;den <a>.

Code-Snippet anzeigen

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

Erweitern Sie das Snippet

Aleksandr Belugin
quelle