YouTip

## jQuery :focus Selector The jQuery `:focus` selector is a powerful tool used to target and manipulate the element that currently has keyboard focus or is active within the document. --- ## Definition and Usage The `:focus` selector selects the element that is currently focused. An element receives focus when it is clicked, tapped, or navigated to using the `Tab` key on a keyboard. This is typically used on interactive elements such as input fields, textareas, buttons, and links. ### Key Considerations: * **Implicit Universal Selector:** If used alone as `$(":focus")`, it is equivalent to `$(*:focus)`. * **Specificity:** To improve performance and target specific elements, it is highly recommended to combine `:focus` with a tag name or another selector (e.g., `$("input:focus")`). * **Dynamic Behavior:** Because focus changes dynamically as the user interacts with the page, this selector is most effective when used inside event handlers (like `focus`, `blur`, `keyup`, or `click`). --- ## Syntax ```javascript $(":focus") ``` To target a specific type of focused element (e.g., only focused text inputs): ```javascript $("input:focus") ``` --- ## Code Examples ### Example 1: Basic Usage (Highlighting the Focused Input) The following example demonstrates how to apply a CSS style to whichever input field currently has focus. ```html

Click on the input fields to see the :focus effect:

Full Name:

Email Address:

``` ### Example 2: Checking if a Specific Element Has Focus You can use the `.is()` method with the `:focus` selector to check if a specific element is currently active. ```javascript if ($("#username").is(":focus")) { console.log("The username field is currently active."); } ``` --- ## CSS vs. jQuery `:focus` While CSS also has a `:focus` pseudo-class (e.g., `input:focus { background: yellow; }`), the jQuery `:focus` selector is useful when you need to perform complex JavaScript logic, traverse the DOM based on the focused element, or support older legacy browsers that have inconsistent CSS focus states. For simple visual styling, using pure CSS `:focus` is generally preferred for performance. Use jQuery `:focus` when dynamic scripting behavior is required.