• In this article we will explain how to use  blur() function in jquery or What is blur () method in jquery or why use blur() method in jquery with example.



The jQuery blur() event occurs when element loses focus. It is trigger by via keyboard commands like tab key or mouse click anywhere on the page. this event used only with form elements like <input> controls.


The blur () method is often used together with focus () method.


Attach a function to the blur event:


  • Example of jQuery blur() event

Let's take an example to demonstrate jQuery blur() event.

 <!DOCTYPE html>
<html xmlns="">
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                $("#txtname").blur(function () {
                    $('#content span').html($(this).val());
    <div> Enter Name: <input type="text" id="txtname" /></div>
    <div id="content" style="width:200px; margin-top:10px;">
       Your Name: <span></span>       


use jquery blur event

In above example we have a text box and div when we enter name in textbox and Enter tab key of keyboard then textbox value set in div span element. 


I hope this article will help to you.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like