How can I set focus on an element in an HTML form using JavaScript?

Know your spotlight: Focus 101

Handling focus in a web form is like being a stage director in a theater play. Let's explore the cast members and script strategies to produce a flawless act.

Directing your Acts: Best Practices

A successful directed act (focus) takes into account these three commandments:

• Visibility: Ensure your actor (element) isn't an Invisible Man. If he tends to be shy, make him slide into the audience’s view using element.scrollIntoView().
• Appropriate Timing: Set focus when it makes sense – when your dialog box pops up, for example. It's hard to talk to an actor who isn't on the stage yet, right?
• Don't overuse your Spotlight: Overdoing the focus is just, well... no focus at all. An audience in constant head-swivel mode is not a happy audience!

Mastering the Play: Advanced Scenarios

"To focus, or not to focus, that's the condition!":

if(userNeedsToCorrectInput){ // If the user tripped while entering the data...
  document.getElementById('errorInput').focus(); // ...give 'em a second chance in the spotlight!
}


Staging a Surprise Entry (Dynamic Content): Base guitar decided to join the band after the gig started? Make sure to turn the spotlight towards him after he's actually on the stage (element is inserted into the DOM).

Using 'Autofocus': The Rehearsed Actor

For HTML5-compatible browsers, the autofocus attribute is like a well-rehearsed actor:

<input id="myInput" autofocus> // The moment 'myInput' lands on the stage, all eyes on him!


Note: This rehearsal didn’t happen for playhouses (browsers) built before IE 10.

Browser Diversity in a Play

Remember, not all playhouses (browsers) are built equal. Some may not have your favourite spotlight (focus feature). Fear not, fallbacks and cross-browser tricks are your friends!

jQuery Separee: Elegance in Simplicity

If you have jQuery in your toolbox, set focus in style:

$(document).ready(function(){ // As soon as the audience is settled...
  $("#elementID").focus(); // ... let the show begin!
});


On Stage, Everyone: Accessibility

Don't you want all your audience to experience the play? Applying logical tabindex flow and ARIA roles makes your website a welcoming theater for everyone.