onfocusout Event
Example
Call a function when an input field is about to lose focus:
<input type="text"
onfocusout="myFunction()">
Try it Yourself »
More "Try it Yourself" examples below.
Description
The onfocusout
event occurs when an element loses focus.
The onfocusout
event is often used on input fields.
The onfocosout
event is often used with form validation (when the user leaves a form field).
Focus Based Events
Event | Occurs When |
---|---|
focus | An element gets focus |
blur | An element loses focus |
focusin | An element gets focus |
focusout | An element loses focus |
See Also:
Syntax
In JavaScript, using the addEventListener() method:
object.addEventListener("focusout", myScript);
Try it Yourself »
Technical Details
Bubbles: | Yes |
---|---|
Cancelable: | No |
Event type: | FocusEvent |
HTML tags: | ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
DOM Version: | Level 2 Events |
Browser Support
onfocusout
is a DOM Level 2 (2001) feature.
It is fully supported in all browsers:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |
More Examples
Example
Using onfocus and onblur:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Try it Yourself »
Example
Clear input field on focus:
<input type="text" onfocus="this.value=''" value="Blabla">
Try it Yourself »
Example
Event delegation: using focus and blur events:
Set useCapture parameter of addEventListener() to true:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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>
Try it Yourself »
Example
Event delegation: using focusin and focusout events:
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
let 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>
Try it Yourself »