About
The focus is the interactive element actually active on a HTML dom document through:
- a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)
- a keyboard shortcut (a element is mapped to a keyboard shortcut)
- after a page load with the autofocus=true attribute
- or dynamically via Javascript (When clicking on a button that opens a modal, the focus should shift from the button to the modal window)
Focus indicates the element currently selected (active) that is ready to receive input.
- The opposite of focus is called blur (ie delete the focus).
- You can also remove the focus from element by bringing another element into focus.
- Not all elements are focusable. Textual element such as Headings, paragraphs, divs cannot receive focus because the user can't interact with them. The focusable elements are called interactive element.
Attribute
Tabindex
Autofocus
The element with the autofocus=true attribute will be focused after a fetch.
This is generally:
- after a page load
- but you can also focus on single element (such as an image)
If put on more than one element, the first one with the attribute receives focus .
Visual
- Visual focus allows users to see on which element a focus is. Every browser has native focus appearance such as outline
- The focusable elements should not be hidden.
- Focus should move from element to element in visual order. (The focus should not jump from an element on one side of the screen to the other side of screen)
Management
Get / Select
Javascript
Example:
function whereIsTheFocus(){
console.log("The active element on this page has");
console.log(" * the id"+parent.document.activeElement.id);
console.log(" * the node name "+parent.document.activeElement.nodeName);
}
console.log("The focus when the page load is");
whereIsTheFocus();
<p>Click on the below button to see the focus changing</p>
<button onClick="whereIsTheFocus()">Where is the focus now ?</button>
Selector
With action pseudo class :focus, you can apply style to the focused element.
Example:
- The rule with the action pseudo class
textarea:focus {
background-color: aliceblue;
}
- The textarea that will change when ti will get the focus (by clicking on it for instance)
<textarea cols="30" rows="5">
Click on me to focus and change the background color
</textarea>
Set
You can modify the focus
- by hitting the tab key
- by clicking on a element.
- dynamically with the focus function
- at page load (element load) with the autofocus=true attribute
- with a keyboard shortcut
focus function
document.getElementById("radio-2").focus();
IsFocused
if (element === document.activeElement) {
console.log('focused');
} else {
console.log('not focused');
}
Disable
To remove an element from the tab order (focusable by keyboard), set the tabindex to -1 (The element is still focusable by script)
tabindex="-1"
Enable
Not all element are by default focusable, only interactive elements (like links, form controls) get focused such as:
To make a non-interactive elements focusable, you need to set the tabindex to a positive value.
Event
When a element gains focus, the focus event is fired.
When a element is focusable, it's passed in the relatedTarget variable of the event.
Reset / Loose / Blur
When the element loose its focus, it's said to blur.
Track
You can track the active element.
- with a live expression in devtool: Ref
- with the DOM Event - focusin
/**
* doc is the document
*/
function printActiveElement(active) {
const selector = active.getAttribute('id') ? `#${active.id}` : `${active.localName}.${active.className.replace(/\s/g, '.')}`;
console.log("Active Element Selector: "+selector);
}
parent.window.addEventListener('focusin', e => {
console.log("The active element has changed");
const active = e.target;
printActiveElement(active);
});
- Click on the console output and then on the code block.