focusout
16 March, 2023
0
0
0
Contributors
About
The focusout event is a DOM event that fires when an element or one of its child elements loses focus. In other words, it is triggered when a user navigates away from an element using the keyboard or mouse. The focusout event is a bubbling event, which means it propagates up the DOM tree, from the element that lost focus to its parent elements.
The focusout event can be used to execute code when an element loses focus. For example, you could use it to validate user input or to hide a tooltip.
Event listener
You can add a focusout event listener to an element like this:
HTML
<input type="text" id="myInput">JavaScript
const input = document.getElementById('myInput');
input.addEventListener('focusout', function(event) {
console.log('Input element has lost focus');
});Here, we retrieve the input element using its ID and then add a focusout event listener to it using the addEventListener method. When the input element loses focus, the callback function passed to addEventListener will be executed, and the message "Input element has lost focus" will be logged to the console.
It's worth noting that the focusout event is similar to the blur event, but with one key difference: the blur event does not bubble, while the focusout event does. This means that the blur event will only be triggered on the element that loses focus, while the focusout event will be triggered on that element and all of its parent elements.
Property
Here's an example of using the onfocusout property with a function assigned to it:
// JavaScript code
const myInput = document.getElementById('my-input');
myInput.onfocusout = function() {
console.log('Input field lost focus');
// Do something else, such as changing the background color of the input field back to its original color
};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 onfocusout property of the myInput element.
The assigned function is called whenever the input field loses focus, which can happen when the user clicks away from the input field or uses the keyboard to navigate away from it. 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 back to its original colour or hiding a tooltip.
Note that the onfocusout property is not supported in all browsers, so it's a good idea to also use the onblur property as a fallback for compatibility.
Inline
You can also use the focusout event inline using the onfocusout attribute in HTML:
<input type="text" onfocusout="alert('Input element has lost focus!')">Here, we add the onfocusout attribute to the input element and set its value to a JavaScript expression that displays an alert box when the input element loses 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 a focusout() method that can be used to programmatically remove focus from an element in JavaScript.
The focusout() method is a built-in method of DOM elements and can be called on any HTML element that can receive focus, such as input elements, links, and buttons.
Here's an example of how to use the focusout() method:
HTML
<button id="myButton">Click me to remove focus from 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.focusout();
});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 focusout() method is called on the input element, which programmatically removes focus from the input element.
Note that the focusout() method is not supported in some older browsers, so it's recommended to use the blur() method instead, which is more widely supported. The blur() method is functionally equivalent to the focusout() method, except that it does not trigger the focusout event.
javascript
javascriptevent
focusout