onblur Event
Example
Execute a JavaScript when a user leaves an input field:
<input type="text" onblur="myFunction()">
Try it Yourself »
Definition and Usage
The onblur event occurs when an element loses focus.
The onblur event is often used on input fields.
The onblur event is often used with form validation (when the user leaves a form field).
Focus Based Events
| Event | Description | Bubbles |
|---|---|---|
| focus | An element gets focus | No |
| blur | An element looses focus | No |
| focusin | An element gets focus | Yes |
| focusout | An element looses focus | Yes |
See Also:
Syntax
In JavaScript, using the addEventListener() method:
object.addEventListener("blur", myScript);
Try it Yourself »
Technical Details
| Bubbles: | No |
|---|---|
| Cancelable: | No |
| Event type: | FocusEvent |
| Supported HTML tags: | ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM Version: | Level 2 Events |
More Examples
Example
Using onfocus and onblur attributes:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
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 »
Browser Support
onblur 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 |
