<h1 id="current-focus">
<span>Current focus: </span>
<span id="current-focus-element"></span>
</h1>
<div>
<button id="a">
A:focus
</button>
<button id="b">
B:focus-visible
</button>
</div>
<div>
<button id="focus-a">Focus A</button>
<button id="focus-b">Focus B</button>
</div>
#a:focus {
outline: 2px solid blue;
}
#b:focus-visible {
outline: 2px solid red;
}
document.getElementById('focus-a').addEventListener('click', () => {
document.getElementById('a').focus()
})
document.getElementById('focus-b').addEventListener('click', () => {
document.getElementById('b').focus({ focusVisible: true })
})
document.addEventListener('focus', () => {
const currentFocus = document.activeElement
const currentFocusElement = document.getElementById('current-focus-element')
currentFocusElement.textContent = currentFocus.id
}, true)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.