HTML - Focus (Active element) (and Blur)

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 tab (focus will go from one focusable element to the next in tab order)
• 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.

Attribute

Tabindex

tabindex global attribute:

• enable a element to be focusable
• indicate the tab order
• remove a element from the tab order

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

activeElement

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:

• What are HTML Input Elements?
• HTML - A element (anchor)

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.