What are use of blur and focus method in JQuery explain with example?

1 votes
45 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What are use of blur and focus method in JQuery explain with example?

1 Answer

1 votes
Ravi Vishwakarma answered 03-Aug-2021 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?