I meet an issue when implementing accessibility features.
I tried to set keyboard focus on a button using the approach:
document.getElementById('123').focus()
But, it doesn't work. The element didn't get focused. Can I get some help? Thanks!
JS Fiddle: /
I meet an issue when implementing accessibility features.
I tried to set keyboard focus on a button using the approach:
document.getElementById('123').focus()
But, it doesn't work. The element didn't get focused. Can I get some help? Thanks!
JS Fiddle: https://jsfiddle/dp5x7rbq/
Share Improve this question edited Sep 9, 2022 at 8:24 Beauty Of Salvation In Christ 211 silver badge13 bronze badges asked Sep 9, 2022 at 7:46 kevinzfkevinzf 1913 silver badges16 bronze badges 5-
3
It is working fine, add
button:focus { background: red }as CSS and you will see the effect. – Idrizi.A Commented Sep 9, 2022 at 7:49 -
@kevinzf it seems you are missing the point. The button element gets the focus as expected but the way you want that focus to show off depends on the css rule you decide to apply explicitely. You were suggested to use
background: redbut you could use any style you prefer just changing the css properties in that rule addressed by the selectorbutton:focus– Diego D Commented Sep 9, 2022 at 8:10 -
usually the focus affects the border so you could use something like this:
button:focus{ border-color: #86b7fe;outline: 0;box-shadow: 0 0 0 .15rem rgba(13,110,253,.25); }but that's an arbitrary choice – Diego D Commented Sep 9, 2022 at 8:13 - by the way to give some credit, if you press TAB instead of using js to give focus, it gets showed somehow even with no css rule. I didn't notice that before. Maybe this developer.mozilla/en-US/docs/Web/CSS/:focus-visible could be of help? It's the first time I realize that – Diego D Commented Sep 9, 2022 at 8:18
- And here: stackoverflow./questions/31402576/… I found some more info about the strange behaviour of browsers when styling elements having focus – Diego D Commented Sep 9, 2022 at 8:24
4 Answers
Reset to default 3Actually, setting focus on the button already works in your example. You can verify which element has focus by checking document.activeElement.
The confusion is about the display or styling of the button’s focus state, which usually is a focus ring.
Make focus visible
Modern browser use :focus-visible pseudo-class to style elements that have focus. That selector takes into account whether the user should see focus or not, for example because they used the keyboard to set focus.
Since you are setting focus programmatically, that browser’s styling does not apply when the button has focus. You need to style the :focus pseudo-class yourself.
#btn123:focus {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color;
}
See What is the default style of the blue focus outline in Chrome?
Use a valid ID
On a side note, the value 123 for an ID is invalid:
[…] an id must contain at least one character and may not contain any space characters.
See What are valid values for the id attribute in HTML?
It is working, just add to css:
button:focus{
color: red;
}
To see the change
As others mentioned, the button indeed retrieves the focus. Besides adding styling to verify this, you can also move the alert to the first button and press space or enter after pressing the right button:
<button type="button" id="123" onclick="alert()"> Find out how</button>
<button type="button" onclick="foo()"> click me to focus on left button</button>
You can focus on button or element using addEventListener in javascript as blow example
document.getElementById("123_id").addEventListener("focus", focusFunction);
function focusFunction(){
//Write your script here
console.log('Focused');
document.getElementById("123_id").style.backgroundColor = "red";
}<html>
<head>
<title>Focus Test</title>
</head>
<body>
<button id="123_id">Hello Button</button>
</body>
</html>