document.getElementById('').focus() not working on button-CodePudding

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/

CodePudding user response：

It is working, just add to css:

button:focus{
  color: red;
}

To see the change

CodePudding user response：

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>

CodePudding user response：

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.

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?

CodePudding user response：

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>