beginnersbook.com

  • Home
  • All Tutorials
    • Learn Servlet
    • Learn JSP
    • Learn JSTL
    • Learn C
    • Learn C++
    • Learn MongoDB
    • Learn XML
    • Learn Python
    • Learn Perl
    • Learn Kotlin
    • Learn jQuery
  • Core Java
  • OOPs
  • Collections
  • Java I/O
  • JSON
  • DBMS

jQuery blur() method

By Chaitanya Singh | Filed Under: jQuery

jQuery blur() method attaches an event handler function to html elements. This event handler function executes when a form field loses focus. This method works just opposite to the focus() method. The difference between focus() and blur() method is that the focus event is triggered when a form field gets focus while blur event is triggered when a form field loses focus.

jQuery blur() method Syntax

$("input").blur(function(){
  //code to execute when a form field loses focus.
});

Here blur() method attaches the event handler function where we write our custom code to the input html elements. This custom code inside event handler function executes when the form field loses focus.

jQuery blur() Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").blur(function(){
    $(this).css("background-color", "#eee");
  });
});
</script>
</head>
<body>

<h2>jQuery blur event example on Beginnersbook.com</h2>
Your Name: <input type="text" name="name"><br>
Your Age: <input type="text" name="age">
</body>
</html>

Output:
Before the form field loses focus:
This screenshot is taken when the page is loaded in browser and no activity is performed on the page.
jQuery blur
After the form field loses focus:
This screenshot is taken after the first form field loses focus. We first clicked inside the first input box and then clicked outside to lose the focus, as you can see the background colour of the form field gets changed to #eee because the field lost the focus.
This logic of changing the background colour is written inside the event handler function which is associated to the input html elements using blur() method.
jQuery blur event

❮ PreviousNext ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()

Recently Added..

  • JSON Tutorial
  • Java Regular Expressions Tutorial
  • Java Enum Tutorial
  • Java Annotations Tutorial

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap