Trending September 2023 # Implementation Of Blur() Method In Jquery With Examples # Suggested October 2023 # Top 14 Popular

You are reading the article Implementation Of Blur() Method In Jquery With Examples updated in September 2023 on the website Happystarlongbien.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Implementation Of Blur() Method In Jquery With Examples

Introduction to JQuery Blur()

Web development, programming languages, Software testing & others

Syntax

To trigger an event for a selected element

$(selector).blur();

To attach an event handler (function) to the blur event

$(selector).blur( handler );

Here, handler is an optional parameter which specifies the function to be executed when the blur event occurs.

$(selector).blur( [eventData], handler );

Here, eventData is an object which contains some data to be passed to the event handler and handler is the function to be executed whenever the blur event occurs. selector refers to the selected HTML element to which blur() method associates an event handler. blur() method is a short hand for on() or trigger() method with blur event as its first parameter.

Examples to Implement blur() method in jQuery

Let us go through few examples to understand better.

Example #1

Code:

$(document).ready(function()  { $(this).css(“background-color”, “blue”); $(“input”).blur(); }); }); This  is  an  example  of  jQuery  blur  event  when  no  function  is  passed  as  an argument  to  blur  method.

Output:

The below  screen  shows  up  when  the  page  is  first  loaded in  the browser and no operation  is performed. Here, input field is yet to receive any input from the user.

We enter some inputs in the input The focus is still in the input field.

Example #2

When a function is passed as an argument to blur() method: Here, blur() method associates an event handler function to the selected html. The code written inside this function gets executed when the html element or the form field loses its  focus.

Code:

$(document).ready(function()  { $(“input”).blur(function()  { $(this).css(“background-color”,  “#BBDBE5”); alert(“The  blur  event  has  occurred  “); }); });

Output:

This is the screen which shows up when the page  is  first  loaded in the browser  and  there is no operation performed.

An alert window pops up saying that “The blur event has occurred”.

This happened because the field lost its focus.

The logic for color change is written inside the event handler function.

This event handler function is associated to the input field by blur() method.

Example #3

Let us understand the difference between focus and blur events: focus() method, just like blur() method, attaches an event handler function to an HTML element or a form field. This function gets executed when the form field gets the focus blur() and focus() methods are often used together but they work just opposite.

 Code:

$(document).ready(function()  { $(“input”).focus(function()  { $(this).css(“background-color”,  “#E5D2BB”); }); $(“input”).blur(function()  { $(this).css(“background-color”,  “#BBDBE5”); }); });

 Output:

The below screen shows up when the page is first loaded in the browser and no operation is performed.

Here, we have two input fields which are empty at this point.

Now, we enters values in the input field and then the focus is moved on to the next input field.

As soon as the focus is moved out of the field, the background color of the first field changes from Solitaire (#E5D2BB) to Pale Blue (#BBDBE5)

Now, the focus is in the second field which has Solitaire (#E5D2BB) background color.

Now, when the focus is removed from both the fields, they have the same background color, that is both of the fields have lost focus.

Conclusion Recommended Articles

This is a guide to JQuery Blur(). Here we discuss the introduction to JQuery Blur(), with appropriate Syntax and respective examples. You can also go through our other related articles to learn more –

You're reading Implementation Of Blur() Method In Jquery With Examples

Update the detailed information about Implementation Of Blur() Method In Jquery With Examples on the Happystarlongbien.com website. We hope the article's content will meet your needs, and we will regularly update the information to provide you with the fastest and most accurate information. Have a great day!