Code has been added to clipboard!

jQuery .focus(): Trigger the focus Event or Add an Event Handler to It

Reading time 2 min
Published Jan 8, 2018
Updated Oct 10, 2019

jQuery focus: Main Tips

  • The jQuery .focus() method attaches an event handler to a focus event.
  • It can also trigger the focus event.
  • The jQuery .focus() method can only be used on form elements and links. In the newest browser versions, you can change it by setting the tabindex property to any element.
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Usage of .focus()

A focus event refers to an element receiving focus after being selected by clicking with the mouse or navigating to it (e.g., by tabbing). The focused element is usually highlighted, and any events related to the keyboard will affect it first as well.

The jQuery .focus() method can either trigger said event or attach a function to run when it is triggered. In the example below, a message shows as you select the input field by clicking inside it:

Example
$("input").focus(() => {
    $("span").css("display", "inline").fadeOut(3000);
});

Note: if you need to apply the handler to the children of the selected element as well, .focusIn() is a better choice that focus().

Two .focus() Syntax Types

To trigger the event, or make jQuery set focus, the syntax is simple – you don't need to add any parameters:

$("selector").focus()

To attach an event handler, you need to specify the selector and the function to run when focus event occurs:

$("selector").focus(function)

Note: you can only make jQuery set focus to visible elements. When hidden items use focus in jQuery, Internet Explorer reports an error.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0