jQuery focus() Event

The focus event triggers when the selected element gets focus. This event is used to highlight some elements on web page.

Syntax of focus() Event

$(selector).focus(function) 

The selector is the element on which focus event trigger. The function is an optional parameter. This function is called when the element is focused.

Example

<form>
<input type="text" value="Click Here" id="fs" />
</form>	

<script>
$(document).ready(function(){  
$("#fs").focus(function(){  
alert("This element gains focus.");  
});  
});  
</script>

Output of the above code

In the above example, on focus the input box, it alerts message.

Example

<form>
Enter Your Name: <input type="text" value="Click Here" id="fs1" />
</form>	

<script>
$(document).ready(function(){  
$("#fs1").focus(function(){  
$("#fs1").css("background-color", "Green");
});  
});   
</script>

Output of the above code

In the above example, on focus the input box, it sets the background color to green.