jQuery focusin() function is used to bind an event handler to the "focusin" event.
The focusin event occurs when an element (or any elements inside it) gets focus.
The focusin() method attaches a function to run when a focus event occurs on the element or any elements inside it.
Syntax
$(selector).focusin(function)
function - Required. Specifies the function to run when the focusin event occurs.
Example
Watch for a focus to occur within the paragraphs on the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusin demo</title>
<style>
span {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p><input type="text"> <span>focusin fire</span></p>
<p><input type="password"> <span>focusin fire</span></p>
<script>
$("p").focusin(function() {
$(this).find("span").css("display", "inline").fadeOut(1000);
});
</script>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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;">
First name: <input type="text"><br> Last name: <input type="text">
</div>
<p>Click an input field to get focus. Click outside an input field to lose focus.</p>
</body>
</html>
Comments
Post a Comment