focusin

16 March, 2023

Contributors

Milsaware

@milsaware

About

The focusin event is a DOM event that fires when an element or one of its child elements receives focus. In other words, it is triggered when a user navigates to an element using the keyboard or mouse. The focusin event is a bubbling event, which means it propagates up the DOM tree, from the element that received the focus to its parent elements.

The focusin event can be used to execute JavaScript code when an element receives focus. For example, you could use it to display a tooltip or to highlight the focused element.

Event listener

You can add a focusin event listener to an element, like this:

HTML

<input type="text" id="myInput">

JavaScript

const input = document.getElementById('myInput');

input.addEventListener('focusin', function(event) {
    console.log('Input element has received focus');
});

Here, we retrieve the input element using its ID and then add a focusin event listener to it using the addEventListener method. When the input element receives focus, the callback function passed to addEventListener will be executed, and the message "Input element has received focus" will be logged to the console.

You can modify the callback function to perform any action you want when the input element receives focus, such as updating the UI or validating user input.

It's worth noting that the focusin event is similar to the focus event, but with one key difference: the focus event does not bubble, while the focusin event does. This means that the focus event will only be triggered on the element that receives focus, while the focusin event will be triggered on that element and all of its parent elements.

Property

Here's an example of using the onfocusin property with a function assigned to it:

// JavaScript code
const myInput = document.getElementById('my-input');

myInput.onfocusin = function() {
    console.log('Input field focused');
    // Do something else, such as changing the background color of the input field
};

Here, we first get a reference to the <input> element with the ID "my-input" using document.getElementById(). Then we assign a function to the onfocusin property of the myInput element.

The assigned function is called whenever the input field receives focus, just like with the onfocus property. However, the onfocusin property has the advantage of bubbling up the DOM tree, which means that the event will also trigger for any parent elements of the input field that have a onfocusin property set. This can be useful in situations where you want to track focus on a group of related elements.

We simply log a message to the console, and you can add additional actions to this function, such as changing the background colour of the input field or displaying a tooltip.

Note that the onfocusin property is not supported in all browsers, so it's a good idea to also use the onfocus property as a fallback for compatibility.

Inline

You can also use the focusin event inline using the onfocusin attribute in HTML:

<input type="text" onfocusin="alert('Input element has received focus!')">

Here, we add the onfocusin attribute to the input element and set its value to a JavaScript expression that displays an alert box when the input element receives focus.

Note that it's generally better to use addEventListener to add event listeners in JavaScript instead of using inline event handlers. This is because inline event handlers can become hard to maintain and debug as your code grows larger and more complex.

Programmatic trigger

There is also a focusin() method that can be used to programmatically set focus on an element.

The focusin() method can be called on any HTML element that can receive focus, such as input elements, links, and buttons:

HTML

<button id="myButton">Click me to focus the input element</button>
<input type="text" id="myInput">

JavaScript

const button = document.getElementById('myButton');
const input = document.getElementById('myInput');

button.addEventListener('click', function() {
    input.focusin();
});

Here, we retrieve a button and an input element using their IDs and then add a click event listener to the button using the addEventListener method. When the button is clicked, the focusin() method is called on the input element, which programmatically sets focus to the input element.

Note that the focusin() method is not supported in some older browsers, so it's recommended to use the focus() method instead, which is more widely supported. The focus() method is functionally equivalent to the focusin() method, except that it does not trigger the focusin event.

javascript

focus

javascriptevent