jQuery focusin() Method
jQuery focusin() method trigger the focusin event. The jQuery focusin event occurs when an element (or any elements inside it) gets focus. And when the focusin event occurs, specified function will execute.
jQuery focus() method trigger on the selected element. Where as jQuery focusin() method trigger on the selected element including any child elements inside it.
Syntax
This triggers the focusin event for selected elements or any child elements inside it.
$(selector).focusin(); // This syntax does not accept any arguments.
This attach a function to the focusin event.
$(selector).focusin(function);
| Parameter | Type | Description |
|---|---|---|
| function | Function | Optional. Specifies the function to execute when the focusin event is occurs. |
Examples
This example represents the focusin() event.
<!DOCTYPE html>
<html>
<head>
<title>jQuery focusin() and focusout() method</title>
<script src="jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("div").focusin(function(){
$(this).css("background-color", "yellow");
});
$("div").focusout(function(){
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<p>Click on following text field to occur focusin or focusout events.</p>
<div style="padding:15px 10px;">
Name: <input type="text" name="name" />
</div>
<div style="padding:15px 10px;">
E-mail: <input type="text" name="email" />
</div>
<div style="padding:15px 10px;">
Phone: <input type="text" name="phone" />
</div>
</body>
</html>