Menu
I have challenged myself to create a visually dynamic and interactive experience in HTML and CSS only (No Javascript). So far, I haven't come across any feature I needed that I couldn't do in pure CSS and HTML. This one is perhaps a bit more difficult.
I need to prevent the user from double-clicking<a>, <input type="submit"> and <button> tags. This is to prevent them double-submitting a form or accidentally making 2 GET requests to a URL. How can this be done in pure CSS? Even if we can't set disabled without JS, there should be some masking technique or combination of styles that can handle it here in 2020.
Here is a simple example of an attempt:
.clicky:focus{
display: none;
pointer-events: none;
}<a href="#down" class="clicky">test</a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p id="down">target</p>Unfortunately, this disables it before the actual click event is fired for some reason. Maybe anchors aren't the best way to test? I will continue to make further attempts.
677
Enable / Disable submit button 1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.
The disabled attribute is a boolean attribute. When present, it specifies that the button should be disabled. A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.).
One idea is to have a layer that come on the top of the element after the first click to avoid the second one.
Here is a basic idea where I will consider a duration of 1s between two clicks that you can decrease. Try to click the button/link and you will notice that you can click again only after 1s.
I am adding a small overlay to better see the trick
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
