Click here to Skip to main content
11,928,985 members (55,854 online)
Click here to Skip to main content
Add your own
alternative version


22 bookmarked

Set Focus to First Input on Web Page

, 9 Sep 2005
Rate this:
Please Sign up or sign in to vote.
Sets focus to the first input that is not disabled and not hidden.


I was developing a web application that had some pretty complex authorization logic, and would enable and disable certain inputs on many different web forms. For example, user A would have the first 5 text boxes disabled and user B would have text boxes 5 through 10 disabled. That made it difficult to set the focus to the proper input. Difficult in terms of the amount of code required to accomplish such a simple task.


  1. At each step of the authorization stage, write hard-coded code to set the focus to an input (i.e. duplicate logic dozens of times on dozens of pages).
  2. Write client-side JavaScript to dynamically handle it.

A Few Tries

Since duplicating logic is generally agreed to be a bad practice, I went for the dynamic option.

My first idea was to simply set the focus to the first element of the first form, which would work in some instances and not in others. For example, in a .NET application the first element of the first form is a hidden element which cannot accept the focus. Also, my application has many disabled fields which also cannot accept the focus. The code below doesn't work in all situations:


My next idea was to loop through the items of the first form and find the first non-hidden, non-disabled element. The code below still doesn't fulfill my ultimate requirement because sometimes I have multiple forms on a page:

var bFound = false;
for(i=0; i < document.forms[0].length; i++)
  if (document.forms[0][i].type != "hidden")
    if (document.forms[0][i].disabled != true)
        var bFound = true;
  if (bFound == true)


The problem with the code above is that it has a hard coded reference to forms[0], so it will not work when the input you want to set the focus to is not within the first form. For example, a complex page might contain several forms for various purposes. My final solution was to use a nested loop that loops through all forms until it finds an input that is not hidden and not disabled. The code below has been tested in Internet Explorer 6.0 and Mozilla Firefox 1.0.4:

var bFound = false;

// for each form
for (f=0; f < document.forms.length; f++)
  // for each element in each form
  for(i=0; i < document.forms[f].length; i++)
    // if it's not a hidden element
    if (document.forms[f][i].type != "hidden")
      // and it's not disabled
      if (document.forms[f][i].disabled != true)
          // set the focus to it
          var bFound = true;
    // if found in this element, stop looking
    if (bFound == true)
  // if found in this form, stop looking
  if (bFound == true)

I copied the code above into a .js file and included a reference on all pages of my application. Now, no matter what inputs are disabled on a form, the focus finds its way to the first one that is enabled.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
John Stanfield, MBA, has been an application architect and developer for eight years, currently using C#, VB.Net, Microsoft Visual Studio.NET, and Microsoft Visual Studio 2005.

You may also be interested in...

Comments and Discussions

GeneralThere is a ready to use solution for ASP.NET 2.0 Pin
WereWolf00719-Aug-08 1:55
memberWereWolf00719-Aug-08 1:55 
GeneralImproved Pin
Warazen19-Mar-08 6:14
memberWarazen19-Mar-08 6:14 
QuestionQuestion? Pin
chimchim9-Nov-06 4:58
memberchimchim9-Nov-06 4:58 
GeneralBetter Implementation Pin
Joel P14-Sep-05 4:57
sussJoel P14-Sep-05 4:57 
This is a good start, but IMO, the function below works better. I've been using it in a production system for over a year with no problems. One caveat: it's an intranet app so I've only tested on IE. Feel free to Firefox-ize it.



function focus_first_field()
// loop through all forms on the page
for(var f=0; f < document.forms.length; f++)
// set frm variable so we don't have to call 'document.forms[f]' everywhere
var frm = document.forms[f]

// loop through all fields in the form
for(var x=0; x < frm.length; x++)
// set fld variable so we don't have to call 'document.forms[f][x]' everywhere
var fld = frm[x]

// use a try/catch block so that if anything fails we just go to the next field
if(!fld.isDisabled && !fld.readOnly)
// I want to handle different field types differently, so switch on the type
// for text boxes, set the focus AND select the text, just like a Windows app
case 'text':
case 'password':
// for check boxes and radio buttons, set the focus to the one that is already
// checked in the group.
case 'checkbox':
case 'radio':
// if it's not an array, there's only one, so focus on it
if(frm[].length == undefined)
// find which one is checked and focus on it
for(var x=0; x < frm[].length; x++)
fld = frm[][x]
// if we didn't find the checked one, just focus on the first one
if(x == frm[].length)
fld = frm[][0].focus()
// select boxes and buttons can just have a simple focus() call
case 'select-one':
case 'select-multiple':
case 'button':
// if anything fails for any reason (hidden div, etc.), execution jumps to catch
// then goes through the loop again

Questionhidden parent element? Pin
jcluggish14-Sep-05 4:33
memberjcluggish14-Sep-05 4:33 
QuestionNo forms ? Pin
zefrit13-Sep-05 10:21
memberzefrit13-Sep-05 10:21 
AnswerRe: No forms ? Pin
JohnStanfield13-Sep-05 15:10
memberJohnStanfield13-Sep-05 15:10 
GeneralYou need one more conditional test Pin
Didier Frund13-Sep-05 7:29
memberDidier Frund13-Sep-05 7:29 
GeneralRe: You need one more conditional test Pin
JohnStanfield13-Sep-05 14:58
memberJohnStanfield13-Sep-05 14:58 
GeneralDrawback Pin
Anonymous12-Sep-05 21:05
sussAnonymous12-Sep-05 21:05 
GeneralRe: Drawback Pin
JohnStanfield13-Sep-05 14:56
memberJohnStanfield13-Sep-05 14:56 
GeneralRe: Drawback Pin
Code Deamon5-Sep-07 2:31
memberCode Deamon5-Sep-07 2:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 9 Sep 2005
Article Copyright 2005 by JohnStanfield
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid