How to use blur() Method in jQuery

This article describe about blur() Method in jQuery.
  • 2899

jQuery Event blur() Method

Occur trigger or bind method on the blur event of selected element. This blur event occur when the element lose the focus.

Note: Mostly in the newer browser, blur event used on all element

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input").focus(function () {

            $("input").css("background-color", "Gray");

        });

        $("input").blur(function () {

            $("input").css("background-color", "yellow");

        });

    });

</script>

</head>

<body>

Enter name: <input type="text" />

<p>When Click in the input field to get focus, and outside the input field to lose focus (blur).</p>

</body>

</html>

 

Output

blur method pic3.jpg

Trigger the blur event for selected element.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input").focus(function () {

            $("input").css("background-color", "gray");

        });

        $("input").blur(function () {

            $("input").css("background-color", "yellow");

        });

        $("#btn1").click(function () {

            $("input").focus();

        });

        $("#btn2").click(function () {

            $("input").blur();

        });

    });

</script>

</head>

<body>

Enter name: <input type="text" />

<p><button id="btn1">Trigger focus event for input field</button></p>

<p><button id="btn2">Trigger blur event for input field</button></p>

</body>

</html>

 

Output

blur pic4.jpg


Bind a Function to the blur Event

Syntax:

$(selector).blur(function)

 

Parameter Description
function Optional. This function specifies to run when the blur event occurs.

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.