``` More examples are included at"> ``` More examples are included at" />
Easy Tutorial
❮ Prop Style Font Prop Img Height ❯

onfocusout Event

Event Object

Example

Execute JavaScript when an input field is about to lose focus:

<input type="text" onfocusout="myFunction()">

More examples are included at the bottom of this page.


Definition and Usage

The onfocusout event is triggered when an element is about to lose focus.

Tip: The onfocusout event is similar to the onblur event. The main difference is that the onblur event does not support bubbling. Therefore, if you need to check if an element or its child elements have gained focus, you should use the onfocusout event.

Tip: Although Firefox does not support the onfocusout event, you can use the onfocus event (with the optional parameter useCapture in the addEventListener() method) to check if an element or its child elements have lost focus.

Tip: The opposite event of onfocusout is the onfocusin event.


Browser Support

Event Chrome Edge Firefox Safari Opera
onfocusout Yes Yes Yes Yes Yes

Note: In Chrome, Safari, and Opera 15+ browsers, the onfocusin event using HTML DOM syntax may not work properly. However, it works as an HTML element when using the addEventListener() method.


Syntax

In HTML:

In JavaScript (may not work in Chrome, Safari, and Opera 15+):

In JavaScript, using addEventListener() method:

Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.


Technical Details

Bubbles: Yes
Cancelable: No
--- ---
Event Type: FocusEvent
--- ---
Supported HTML Tags: All HTML elements except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
--- ---

More Examples

Example

Using "onfocusin" and "onfocusout" events:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Example

Event delegation: Set the useCapture parameter of addEventListener() to true (for focus and blur):

<form id="myForm"> <input type="text" id="myInput"></form>
<script>var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {   
document.getElementById("myInput").style.backgroundColor = "yellow"; }
function myBlurFunction() {   
document.getElementById("myInput").style.backgroundColor = ""; }
</script>

Example

Event delegation: Using the focusout event (not supported in Firefox):

<form id="myForm"> <input type="text" id="myInput"></form>
<script>var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);function 
myFocusFunction() {   
document.getElementById("myInput").style.backgroundColor = "yellow"; }
function myBlurFunction() {   
document.getElementById("myInput").style.backgroundColor = ""; }
</script>

Event Object

❮ Prop Style Font Prop Img Height ❯