DOM event - focus (onfocus)

Devtool Chrome Event Listener

About

This page is about the focus event. ie how to register a callback function to handle this event

focus means that a HTML element becomes active.

The opposite of the focus event is called the blur event.

1)

Properties

Inheritance

Focus Event Type Inheritance (bubble) Description
focus false the child elements do not inherit the listener
blur false the child elements do not inherit the listener
focusin true the child elements inherit the listener
focusout true Doc

For instance, the focus event listener does not propagate to its children. (ie If you create a focus listener on a window, all elements of the window will not inherit the listener.

Registration

Listener

As an listener

function changeFocus(){
  document.getElementById("radio-2").focus();
}

onFocus = (event) => {
  console.log(event.target.id+" is on focus");
  event.target.style.background = 'pink';    
};

radio1 = document.getElementById("radio-1");
radio1.addEventListener('focus', onFocus);

radio2 = document.getElementById("radio-2");
radio2.addEventListener('focus', onFocus);
<p>Click on Radio1, then Radio2, then the Button
<p><label><input id="radio-1" type="radio" name="radio" value="radio-1"  autofocus />Radio 1</label></p>
<p><label><input id="radio-2" type="radio" name="radio" value="radio-2"  />Radio 2<label></p>
<button onClick="changeFocus()">Focus Dynamically on Radio2</button>

handler

As an handler - The onfocus attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.





Discover More
Devtool Chrome Event Listener
Change event (DOM, Javascript)

A page and example about the change event
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 - 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
Event - Category

event type are categorized further in category. Form Event Focus Event Input Devices Event View Events Example non-normative. Category Event Type Form Event submit Focus Event focus,...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

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)...
Color Autocompletion List
How to create an Autocompletion functionality with CSS, Javascript and HTML

This article shows you how to create a search box with an autocompletion feature
Windows 95 Wallpaper Version
How to solve a loss of focus on Windows?

When working and typing a text, you may lose focus (ie the pointer is no more in the application where you were working and you are interrupted in your writing) This page shows you how to solve it. ...
Chrome Devtool Selector
Selector - Logical Pseudo-Class

Logical Pseudo-class are: * :matches * :not * :has * :is that return a boolean value (ie logical). They are predicate expression. Example of a selector when the element has the class fade...
Chrome Devtool Selector
Selector is pseudo-class

:is() is a matches-any logical pseudo-class that takes a selector list as its argument. matches any element that is being hovered or focused, regardless of its namespace. represents only...



Share this page:
Follow us:
Task Runner