19 Feb jQuery focusout() method
Definition
Trigger an event when an element loses focus, using the jQuery focusout() method. It triggers even if any child element lose focus.
Note: The focusout() method is used often along with focusin().
Syntax
The following is the syntax,
|
1 2 3 |
$(selector).focusout(func) |
The following is the parameter used in the jQuery focusout() method,
- func: When event occur, this function runs. It is an optional parameter.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").focusin(function(){ $("span").css("display", "inline"); }); $("input").focusout(function(){ $("span").css("color", "blue"); }); }); </script> <style> span { display: none; } </style> </head> <body> <p>Enter subject details below,</p> <p><input type="number"> <span>Enter subject id</span> </p> <p><input type="text"> <span>Enter subject name</span> </p> <p><input type="text"> <span>Enter student name</span> </p> </body> </html> |
The following is the output,
Click inside the input field to get focus,
Click outside the input field to get focus,
No Comments