kevinzf
0
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.net/dp5x7rbq/
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>
Actually, 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.
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?
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.
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>