Bagaimana cara menonaktifkan tombol kirim & tautan saat diklik dalam CSS murni?

Saya telah menantang diri saya untuk menciptakan pengalaman visual yang dinamis dan interaktif hanya dalam HTML dan CSS (Tanpa Javascript). Sejauh ini, saya belum menemukan fitur apa pun yang saya butuhkan yang tidak dapat saya lakukan dalam CSS dan HTML murni. Yang ini mungkin sedikit lebih sulit.

Saya perlu mencegah pengguna mengklik dua kali <a>, <input type="submit">dan memberi <button>tag. Ini untuk mencegah mereka mengirim dua formulir atau secara tidak sengaja membuat 2 permintaan GET ke URL. Bagaimana ini bisa dilakukan dalam CSS murni? Bahkan jika kita tidak dapat mengatur disabledtanpa JS, harus ada beberapa teknik masking atau kombinasi gaya yang dapat mengatasinya di sini pada tahun 2020.

Ini adalah contoh sederhana dari suatu upaya:

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

Luaskan cuplikan

Sayangnya, ini menonaktifkannya sebelum acara klik yang sebenarnya dipecat karena alasan tertentu. Mungkin jangkar bukan cara terbaik untuk menguji? Saya akan terus melakukan upaya lebih lanjut.

html css

— Paragon512
sumber

dapatkah Anda membuat formulir memberi kelas bagi dirinya sendiri setelah dikirimkan pertama kali?

— SIGSTACKFAULT

Mungkin pointer-events: allsecara default, tetapi tidak di: status aktif atau: fokus? Suka diatur pointer-events: noneuntuk negara-negara itu?

— Jeremy Harris

mungkin el:active, el:focusdikombinasikan dengan pointer-events

— Paragon512

Apakah ini berhasil? : active {display: none; // misalnya}

— MD Hesari

Upaya tambahan. Itu menonaktifkannya sebelum menembakkan klik.

— Paragon512

Jawaban:

Satu ide adalah memiliki layer yang muncul di bagian atas elemen setelah klik pertama untuk menghindari yang kedua.

Berikut adalah ide dasar di mana saya akan mempertimbangkan durasi 1santara dua klik yang dapat Anda kurangi. Coba klik tombol / tautan dan Anda akan melihat bahwa Anda dapat mengklik lagi hanya setelah 1s.

Saya menambahkan overlay kecil untuk melihat triknya

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

Luaskan cuplikan

— Temani Afif
sumber

sepertinya tidak bekerja dengan <a>tag

— Aleksandr Belugin

@AlexandrBelugin berfungsi dengan baik, periksa pembaruan. Mungkin Anda melakukan sesuatu yang salah

— Temani Afif

Saya pikir masih membiarkan saya mengklik tombol 2 kali? Saya bisa melihat tombolnya tertekan kedua kalinya.

— Paragon512

@TemaniAfif ketika saya melakukan ini <a href="#" onclick="console.log('lalala')">Click me</a>untuk menghubungkan dengan sisa kode, tidak ada log untuk menghibur. imho itu berarti tautan tidak diklik

— Aleksandr Belugin

Sepertinya cara terbaik untuk menguji ini adalah dengan <a>tag. Saya mencoba pengujian dengan mengirimkan tombol tetapi pemantauan inspektur jaringan aneh dan tidak konsisten. Ketika saya mengklik tautan, itu tidak memecat klik. Jika Anda menetapkan target ke jangkar dan mengklik tautan, itu akan menonaktifkan tautan tetapi tidak akan melompat ke jangkar.

— Paragon512

Solusi pertama

Idenya adalah menggunakan radio buttonkeadaan dengan :checkedmelakukan modifikasi. Kami menyembunyikan radiolingkaran dan kapan :checkeduntuk <a>membuat pointer-events: none;dan untuk buttonsberbagai jenis kami menyembunyikannya dan menunjukkan disabledyang lainnya.

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>

Luaskan cuplikan

Solusi kedua

Ini cocok untuk links. Idenya adalah menggunakan :target. Targe elementdisembunyikan terlebih dahulu. Kemudian ketika ditargetkan penggunaan :targetuntuk pointer-events: none;dari <a>.

Tampilkan cuplikan kode

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

Luaskan cuplikan

— Aleksandr Belugin
sumber