:focus JQ Home  <<  Selectors  <<  :focus

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

Signature Description
jQuery(':focus')Form focus pseudo-class match

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);
  });
});


Pie Survey     

Userame:      

Password:               

     

Which pie do you prefer?:

Select a pie shape: 

            

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors