jQuery Selectors: Selects elements that are in focus in the form

This entry is part 24 of 33 in the series jQuery Selectors

The :focus selector is usually used in selecting an input textbox that is in focus.

Focus means that the particular textbox has been clicked and that the mouse cursor is on the textbox.

Once the click event is detected and that the selected element is in focus, its background color would be changed to blue.

This is the correct method of using the :focus selector.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        .focused {
            background: #abcdef;
        $(function () {
            $('input').click(function () {
                $(this).addClass('focused', $(this).is(':focus'));

Name: <input type='text' name='name'>

Series Navigation<< jQuery Selectors: Select element with checked attribute
jQuery Selectors: Enabled and disabled input box >>

Leave a comment

Leave a Reply