Using visibility and :focus to cause an HTML element to lose focus
I'm experimenting with preventing DOM elements (specifically input/textarea/button/a HTML elements) from getting focus. After some playtime, I stumbled on a strange and unique solution.
element:focus {
visibility: hidden;
}
This causes the element to be hidden and therefore lose focus.
In turn, the lose of focus causes the element to become visible again.
I'm looking for comments on this technique since the lost focus at best feels like a side effect and a hack at worst.
https://codepen.io/Snap-Riley/pen/NWmJMPR
Snap Riley
CodePen
Using visibility and :focus to cause an HTML element to lose focus
This pen is the result of an experiment with focus on HTML elements. The pen shows how focus is lost when a user tries to use mouse or keyboard to get ...
10 Replies
why do you want a completely useless element?
let me check if it can cause seizures
i doubt it will
if you want an element that is read-only and can't get focus, use
readonly
and add disabled to it for good measureThis experiment originated from an event when I only had access to the CSS at the time. As such, I could not change the UX through structure (HTML) or programmatic means (JS). So I started with setting "pointer-events" and "user-select" to stop focus. But this did not stop the user from tabbing into the element and getting focus.
We implemented the correct approach through a combination of HTML and JS mechanisms. However, it started a discussion about the possibility of doing this in CSS only. This is the outcome of the experiment.
Interestingly, this results seems to have a similar affect as the deprecated "-moz-user-focus" found in Firefox up to 121 (Dec2023).
that makes absolute sense
the result makes the element completely useless because you can't select the text, but other than that, it does it's thing and it doesn't cause any issues
i was half-expecting it to get into a visible<=>hidden loop, but that doesn't happen because it loses focus
given the tight requirements, i can't think of a better way to do it
Hehehe, it seems so evil but the interesting part is how well it actually works...if you ignore the fact that the user cannot to anything with the element.
But isn't that what we are trying to do by "disallowing" the focus on the element?
yeah, it is
kinda
usually, it means the input can't be focused and changed, like
readonly
at least, that's how i feel itOh, "readonly" and "disabled" are the correct ways to handle this (plus validation code either in the browser or the backend server) but this serves as an additional way of stopping focus.
I just found this same type of solution in a stackoverflow answer: https://stackoverflow.com/a/78046052
Stack Overflow
tabindex in CSS
Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?
EDIT
I should say, my goal is to catch keydown events on a div. I saw this page http://www.
as an exercise, not for use in real websites, it is an interesting thing
I've been trying to fathom where this could be used "appropriately" but there are more standard means that have the same affect
i can't think of any real-world use-cases