CodesJava

Easy learning with example program codes

jQuery blur()


The jQuery blur() event triggers the blur (element loses focus) event.

Syntax:

To triggers the blur event.

$(selector).blur()  

To add a function to the blur event.

$(selector).blur(function) 

Function: It is an optional parameter which is used to specify the function to run after the event occurs.

Example 1

<!DOCTYPE html>  
<html>  
head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){  
    $("input").blur(function(){  
        alert("This text box has lost its focus.");  
    });  
});  
</script>  
</head>  
<body>  
Enter your name: <input type="text">  
</body>  
</html>

Try it

JS Bin on jsbin.com

Example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("input").focus(function(){
    	$(this).css("background-color", "#cccccc");
	});
	$("input").blur(function(){
    	$(this).css("background-color", "#ffffff");
	});
});
</script>
</head>
<body>
 
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
 
</body>
</html>

Try it

JS Bin on jsbin.com
 

Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki