Description :
In this example The focus() method triggers the focus event and it occur when textbox get focused.
<!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").focus(function(){ $("span").css("display", "inline").fadeOut(3000); }); }); </script> <style> span { display: none; } </style> </head> <body> <h3>Enter text:-</h3><input type ="text"> <span style="color: mediumvioletred;font-size: 30px; font-family: 'Times New Roman', Times, serif">Learnkode will help you to be a great coder!</span> </body> </html>
Description :
The focusout event occurs when an element loses focus. The focusout()
method attaches a function to run when a focusout event occurs on the element, or any elements inside it. In the same way focusin()
function executes when you make focus the selected element.
Syntax of focusout: $(selector).focusout(function)
Syntax of focusin: $(selector).focusin(function)
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("div").focusin(function(){ $(this).css("background-color", "#FFFFCC"); }); $("div").focusout(function(){ $(this).css("background-color", "#FFFFFF"); }); }); </script> </head> <body> <div style="border: 1px solid black;padding:10px;"> <b>First name: </b><input type="text"><br><br> <b>Last name:</b><input type="text"> </div> </body> </html>