HTML - Focus (Active element) (and Blur)

About

The focus is the element actually active on a HTML page through:

  • after a tab
  • after a page load
  • or dynamically

The opposite of focus is called blur (ie delete the focus).

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 .

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:

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

focus function

document.getElementById("radio-2").focus();

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 an element 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

_

/**
 * 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.

Powered by ComboStrap