THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

jQuery Focus and Blur Effect Differences

jQuery Focus and Blur Effect Differences

Welcome, all we will see what is the difference between Focus Event and Blur Event in jQuery.


This two effect is related to each other and ya both when worked together give the best result.

So first what is Focus() method?
It will get executed when a focusable element gains the focus.

What is Blur() Method?
It will get executed when a focusable element loses the focus.

So first the focus event will occur and then when the focusable element loses focus then the blur effect will take place.


focus() vs blur()



<!DOCTYPE html>

<html>
<head>
<title>ThapaJavascript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h2> focus()  vs blur() </h2>
<input type="text" name="" id="textbox">
<span id="showdata">Welcome</span>
<span id="showdataforblur">TakeCare</span>
<script>
$(document).ready(function(){
$('span').css('display','none');
$('#textbox').focus(function(){
$('#showdata').css('display','inline').fadeOut(4000);
})
$('#textbox').blur(function(){
$('#showdataforblur').css('display','inline').fadeOut(4000);
})
});
</script>

</body>
</html>

2 comments:

  1. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

    ReplyDelete
  2. It’s very informative and you are obviously very knowledgeable in this area. You have opened my eyes to varying views on this topic with interesting and solid content. מדבקות לחולצות

    ReplyDelete