शुद्ध सीएसएस में सबमिट बटन और लिंक पर क्लिक को अक्षम कैसे करें?

Question

मैंने HTML और CSS में केवल नेत्रहीन गतिशील और इंटरैक्टिव अनुभव बनाने के लिए खुद को चुनौती दी है (कोई जावास्क्रिप्ट नहीं)। अब तक, मुझे ऐसी किसी भी सुविधा के बारे में पता नहीं है जिसकी मुझे जरूरत थी कि मैं शुद्ध CSS और HTML में नहीं कर सकता। यह एक शायद थोड़ा अधिक कठिन है।

मैं डबल क्लिक से उपयोगकर्ता को रोकने के लिए की जरूरत है <a>, <input type="submit">और <button>टैग। यह उन्हें फ़ॉर्म को डबल-सबमिट करने या गलती से URL पर 2 GET अनुरोध करने से रोकने के लिए है। यह शुद्ध CSS में कैसे किया जा सकता है? यहां तक ​​कि अगर हम disabledजेएस के बिना सेट नहीं कर सकते हैं , तो कुछ मास्किंग तकनीक या शैलियों का संयोजन होना चाहिए जो 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>

दुर्भाग्य से, किसी कारण से वास्तविक क्लिक ईवेंट को निकाल दिए जाने से पहले यह इसे निष्क्रिय कर देता है। शायद एंकर परीक्षण करने का सबसे अच्छा तरीका नहीं हैं? आगे भी प्रयास करता रहूंगा।

Comments

पहली बार सबमिट करने के बाद क्या आप फॉर्म को खुद को एक वर्ग दे सकते हैं?

— SIGSTACKFAULT

शायद pointer-events: allडिफ़ॉल्ट रूप से, लेकिन इसमें नहीं: सक्रिय या: फोकस स्थिति? pointer-events: noneउन राज्यों के लिए सेट की तरह ?

— जेरेमी हैरिस

शायद el:active, el:focusसूचक-घटनाओं के साथ संयुक्त

— Paragon512

क्या यह काम करता है? : सक्रिय {प्रदर्शन: कोई नहीं; // उदाहरण के लिए}

— एमडी हेसरी

जोड़ा गया प्रयास। हालांकि यह क्लिक फायरिंग से पहले इसे अक्षम कर दिया।

— 18agon पर Paragon512

Answer 1

एक विचार के लिए एक परत है जो तत्व के शीर्ष पर आती है पहले क्लिक के बाद दूसरे से बचने के लिए।

यहां एक मूल विचार है जहां मैं 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>

Comments

ऐसा लगता है कि <a>टैग के साथ काम नहीं कर रहा है

— अलेक्सांद्र बेलुगिन

@AleksandrBelugin यह ठीक काम कर रहा है, अद्यतन की जाँच करें। हो सकता है कि आपने कुछ गलत किया हो

— Temani Afif

मुझे लगता है कि यह अभी भी बटन को 2 बार क्लिक करने देता है? मैं दूसरी बार बटन दबाना देख सकता हूं।

— Paragon512

@TemaniAfif जब मैं ऐसा करता हूं तो <a href="#" onclick="console.log('lalala')">Click me</a>बाकी कोड के साथ लिंक करने के लिए कुछ भी नहीं होता है। imho इसका मतलब है कि लिंक पर क्लिक नहीं किया गया है

— विलेनो बेलुजिन

यह <a>टैग के साथ यह परीक्षण करने का सबसे अच्छा तरीका है । मैंने सबमिट बटन के साथ परीक्षण की कोशिश की, लेकिन नेटवर्क निरीक्षक की निगरानी अजीब और असंगत है। जब मैं लिंक पर क्लिक करता हूं, तो यह क्लिक को फायर नहीं करता है। यदि आप किसी एंकर को लक्ष्य निर्धारित करते हैं और लिंक पर क्लिक करते हैं, तो वह लिंक को अक्षम कर देगा लेकिन एंकर के पास नहीं जाएगा।

— Paragon512

Answer 2

पहला उपाय

संशोधन करने के लिए 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>।

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