---
title: "What are use of blur and focus method in JQuery explain with example?"  
description: "What are use of blur and focus method in JQuery explain with example?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93828/what-are-use-of-blur-and-focus-method-in-jquery-explain-with-example  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# What are use of blur and focus method in JQuery explain with example?

What are use of blur and [focus](https://yourviews.mindstick.com/audio/1251/how-music-can-improve-your-focus-and-mood) [method in JQuery explain](https://answers.mindstick.com/qa/93802/what-are-the-use-of-text-method-in-jquery-explain-with-example) with example?

## Answers

### Answer by Ravi Vishwakarma

The jquery **focus** event occurs when the mouse is clicked on the selected html element. Like when the cursor is clicked in the textfield box, the focus event is called and when the cursor is removed from selected html element, then the **blur** event is called.

```
Syntax
$(selector).focus()
$(selector).focus(function)
$(selector).blur()
$(selector).blur(function)  
```

```
<!doctype html>
<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
    <title>Event demo</title>
    <script>
        $(document).ready(function () {
            $('input').focus(function () {
                $('p').removeClass('alert-danger');
                $('p').addClass('alert alert-success rounded-sm p-2 m-1');
                $('p').text('Focus on textfield');
            });
            $('input').blur(function () {
                $('p').removeClass('alert-success');
                $('p').addClass('alert alert-danger rounded-sm p-2 m-1');
                $('p').text('Blur on textfield');
            });
        });
    </script>
</head>
    <style>
        input {
        }
    </style>
<body>
    <div class='container'>
        <div class='m-2 '>
            <input type='text' placeholder='Enter some data' />
        <button class='btn btn-primary' >Submit</button>
            <p class='alert alert-danger rounded-sm p-2 m-1'></p>
        </div>
    </div>
    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>
```

![What are use of blur and focus method in JQuery explain with example?](https://answers.mindstick.com/questionanswer/c827b918-0f63-4a7a-8010-ecfcadf57e6e/images/40729ba0-6919-447b-a1fc-1008dda54180.png)

\


---

Original Source: https://answers.mindstick.com/qa/93828/what-are-use-of-blur-and-focus-method-in-jquery-explain-with-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
