onblur Event
Example
Call a function when a user leaves an input field:
<input type="text" onblur="myFunction()">
Try it Yourself »
Description
The onblur
event occurs when an HTML 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 | 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("blur", myScript);
Try it Yourself »
Technical Details
Bubbles: | No |
---|---|
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 |
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 |