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>