:focus JQ Home  <<  Selectors  <<  :focus

• <<    :file Selector
• :image Selector     >>

Form focus selector.

Shorthand version $(':focus')

Description

The :focus selector, selects currently focused element.

• Being a jQuery extension the :focus pseudo selector is not part of any current CSS specification. Therefore :focus cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
• You can get the currently focused element using $(document.activeElement) without having to search the whole DOM tree, thus improving performance.

Syntax

Parameters

None.

Return

N/A.

:focus Example Selectors  <<  Top

Selects currently focused element..

In the example below we apply an orange background to form elements that have focus, click on input ares of the form to see this effect.

.content .focus{background-color:orange;}

$(function(){
  $('.ourform').submit(function () { return false; }); // disable submit 

  $(".content").on( "focus blur", "*", function(event) {
    var inFocus = $(this);
  
    setTimeout(function() {
      inFocus.toggleClass("focus", inFocus.is(":focus"));
    }, 0);
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :file Selector
• :image Selector     >>