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.

  • 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

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:

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();

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

Devtool Track Active Element

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





Discover More
Boxdim
CSS - Border

This page shows you how to define the border of a box You may see the outline: The outline is the outermost delimitation line of the margin area (applied by default when the element is on focus)....
Devtool Chrome Event Listener
DOM - Blur Event

blur is an event that occurs when an element lost focus (blur) (ie is not the active element anymore) focus event Close an overlay (such as a dropdown menu) Reset a state
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
DOM Event - focusin

focusin is a focus event where you can register a listener that is enable for all children elements. Ref If a focus event occurs in...
Devtool Chrome Event Listener
DOM event - focus (onfocus)

This page is the focus event. ie how to register a callback function to handle this event focus means that a HTML element becomes active. blur Focus Event Type Inheritance (bubble) Description...
HTML - (Element|Tag|Markup)

element in HTML where: Tag In HTML, Tag name of an element are TR/html-markup/documents.htmlcase-insensitive. In XHTML, tag names are case sensitive and must be written in their canonical...
HTML - Accesskey Attribute (keyboard shortcut)

HTML All HTML elements may have the accesskey content attribute set. The accesskey attribute's value is used by the user agent as a guide for creating a keyboard shortcut that focuses (ie activates)...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - Keyboard Navigation (key event)

Navigation / Manipulation of an HTML document with the keys of a keyboard. The tab key is the default key that permits to move from a interactive element to another and therefore change the focus...
HTML - Label

The label html element represents a caption for a control item in a form (user interface). idfor A click on the label: will bring focus on the control element. propagates to the control element....



Share this page:
Follow us:
Task Runner