JavaScript onblur Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onblur Event

The onblur event occurs when an element has lost focus.

Note: Unlike onfocusout event, the onblur event will NOT bubble, i.e., The element with onblur event will NOT be affected when its child element loses its focus.

onblur Event as Attribute

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <input type="text" onblur="myFunction(this)"> <script> function myFunction(x){ x.style.color = "red"; } </script> </body> </html>

Run

Syntax

As Attribute

As Property

object.onblur = function(){ // code };

Using Event Listener

object.addEventListener("blur" , myScript);

onblur Event as Property

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <input type="text"> <script> var x = document.getElementsByTagName("input")[0]; x.onblur = function(){ alert("Input field lost focus"); }; </script> </body> </html>

Run

Using addEventListener() Method

Note: The addEventListener() method is not supported in Internet Explorer 8 and below.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <input type="text"> <script> var x = document.getElementsByTagName("input")[0]; x.addEventListener("blur", function(){ alert("Input field lost focus"); }); </script> </body> </html>

Run