---
title: "JQuery blur method"  
description: "In JQuery blur method trigger blur event when element will lose their focus. In this article I am using blur () method on html page. In html page I ha"  
author: "Sachindra Singh"  
published: 2011-02-22  
updated: 2020-03-04  
canonical: https://www.mindstick.com/articles/470/jquery-blur-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# JQuery blur method

In JQuery blur method trigger blur event when element will lose their focus. In this article I am using blur () method on html page. In html page I had created some text boxes, if any textboxes got focus then back color of textboxes will white and if textboxes lost their focus then textboxes back color will change, as shown by below example:\

##### Code:

```
<head>    <title></title>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    <script type="text/javascript">       $(document).ready(function()         {             $("input").focus(function() //focus method will execute when input element got focus            {                $("input").css("background-color",  "white");//when input element got focus backcolor will white            });            $("input").blur(function() //when input element lost its focus blur event will raise             {                $("input").css("background-color",  "gray // css will change backcolor of textboxes            });        });    </script></head><body><h2>Using JQuery blur event </h2>    Enter name:    <input type="text" /><!-- input element for textboxes-->    <br />    <br />    Enter age: <input type="text" />     <br />                                  <br />    Enter City<input type="text" />    <br />    <br />    Enter State<input type="text" />    <br />    <br />        <button>Submit</button></body></html>
```

If textboxes got focus backcolor will white as shown below:

![blur method in JQuery](https://www.mindstick.com/mindstickarticle/db2a3600-a3a2-402d-86d1-0c290e451efa/images/22a3c40c-0f4b-4a2e-b63d-dca89977be5b.png)

If textboxes lost their focus back color of textboxes will change as shown below:

\

---

Original Source: https://www.mindstick.com/articles/470/jquery-blur-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
