Did you find this useful?
Socialize it today.


jQuery Focus Events

Tuesday, June 26, 2012

jQuery has several focus related events (focus, focusin, and focusout). The focus event occurs when an element gets focus, such as when the element is selected by a mouse click or by using the tab key on the keyboard to navigate to the target element. The focus() method triggers the focus event, or specifies a function to run when a focus event occurs. The focusin event is similar to the focus event, but unlike the focus() method, the focusin() method triggers if any child element gets focus. The same is true with the focusout() method.


Syntax

$(selector).focus(function())
$(selector).focusin(function())
$(selector).focusout(function())


ParameterDescription
functionSpecifies the function to run when the event occurs.


Focus Example

In the following jQuery example, when a user clicks on an input element or uses the tab key, the currently selected input element will trigger the focus() method. In the example below, when this event is triggered, a different CSS set of properties are applied to the element that has the focus event attached. When the user clicks on a different input element, the focusout() method is triggered.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function() {
    $(this).css({ "background-color": "#999999", "color": "#FFFFFF"});
  });
  $("input").focusout(function() {
    $(this).css({ "background-color": "#FFFFFF", "color": "#999999"});
  });
});
</script>
</head>
<body>     
<div>
 <table>
  <tr><td>First Name</td><td><input /></td></tr>
  <tr><td>Last Name</td><td><input /></td></tr>
  <tr><td>Department</td><td><input /></td></tr>
 </table>
</div>
</body>
</html>


First Name
Last Name
Department


Focusin and Focusout Example

In the following jQuery example, when a user clicks on a child element of the parent element, the focusin event that is attached to the parent is executed. In the example below, the focusin() method triggers and executes a function to modify the CSS background-color property of the parent element.


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").focusin(function() {
    $(this).css({ "background-color": "#8A0808", "color": "#FFFFFF"});
  });
  $("div").focusout(function() {
    $(this).css({ "background-color": "#DEDEDE", "color": "#666666"});
  });
});
</script>
</head>
<body>     
<div>
 <table>
  <tr><td>First Name</td><td><input /></td></tr>
  <tr><td>Last Name</td><td><input /></td></tr>
  <tr><td>Department</td><td><input /></td></tr>
 </table>
</div>
</body>
</html>


First Name
Last Name
Department

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS and JavaScript Editor Professional jQuery JavaScript and jQuery: The Missing Manual