How do I set the focus to the first input element in an HTML form independent from the id

Question

Is there a simple way to set the focus  input cursor  of a web page on the first input element  textbox  dropdownlist       on loading the page without having to know the id of the element   I would like to implement it as a common script for all my pages forms of my web application

User · Answer

without jquery  e g  with regular javascript   document querySelector  form input not  type hidden     focus     works on Safari but not Chrome 75  april 2019

User · Answer

The most comprehensive jQuery expression I found working is  through the help of over here     document  ready function            input visible enabled first   focus

User · Answer

document forms 0  elements 0  focus      This can be refined using a loop to eg  not focus certain types of field  disabled fields and so on  Better may be to add a class  autofocus  to the field you actually do want focused  and loop over forms i  elements j  looking for that className   Anyhow  it s not normally a good idea to do this on every page  When you focus an input the user loses the ability to eg  scroll the page from the keyboard  If unexpected  this can be annoying  so only auto-focus when you re pretty sure that using the form field is going to be what the user wants to do  ie  if you re Google

User · Answer

The most comprehensive jQuery expression I found working is  through the help of over here     document  ready function            input visible enabled first   focus

User · Answer

For those who use JSF2 2  and cannot pass autofocus as an attribute without value to it  use this    p autofocus  true    And add it to the namespace p  Also often used pt  Whatever you like     lt html     xmlns p  http   java sun com jsf passthrough  gt

User · Answer

Putting this code at the end of your body tag will focus the first visible  non-hidden enabled element on the screen automatically   It will handle most cases I can come up with on short notice    lt script gt       function            var forms   document forms                for var i   0  i  lt  forms length  i                 for var j   0  j  lt  forms i  length  j                     if  forms i  j  readonly    undefined  amp  amp  forms i  j  type     hidden   amp  amp  forms i  j  disabled    true  amp  amp  forms i  j  style display     none                        forms i  j  focus                        return                                                       lt  script gt

User · Answer

Although this doesn t answer the question  requiring a common script   I though it might be useful for others to know that HTML5 introduces the  autofocus  attribute    lt form gt     lt input type  text  name  username  autofocus gt     lt input type  password  name  password  gt     lt input type  submit  value  Login  gt   lt  form gt    Dive in to HTML5 has more information

User · Answer

I m using this      form first   input select textarea   filter   not  readonly  readonly    not  disabled  disabled    not  type  hidden      first   focus

User · Answer

This includes textareas and excludes radio buttons    document  ready function         var first input      input type text  visible enabled first  textarea visible enabled first   0       if first input    undefined   first input focus

User · Answer

I needed to solve this problem for a form that is being displayed dynamically in a modal div on my page  and unfortunately autofocus isn t honored when the containing div is shown by changing the display property  at least not in Chrome   I don t like any of the solutions that require my code to infer which control I should set the focus to  because of the complications of hidden or zero-sized inputs  etc  My solution was to set the autofocus attribute on my input anyway  then set the focus in my code when I show the div  form querySelector    autofocus    focus

User · Answer

You also need to skip any hidden inputs   for  var i   0  document forms 0  elements i  type     hidden   i     document forms 0  elements i  focus

User · Answer

Tried lots of the answers above and they weren t working  Found this one at  http   www kolodvor net 2008 01 17 set-focus-on-first-field-with-jquery  comment-1317 Thank you Kolodvor       input text visible first   focus

User · Answer

This includes textareas and excludes radio buttons    document  ready function         var first input      input type text  visible enabled first  textarea visible enabled first   0       if first input    undefined   first input focus

User · Answer

There s a write-up here that may be of use  Set Focus to First Input on Web Page

User · Answer

If you re using the Prototype JavaScript framework then you can use the focusFirstElement method   Form focusFirstElement document forms 0

User · Answer

document forms 0  elements 0  focus      This can be refined using a loop to eg  not focus certain types of field  disabled fields and so on  Better may be to add a class  autofocus  to the field you actually do want focused  and loop over forms i  elements j  looking for that className   Anyhow  it s not normally a good idea to do this on every page  When you focus an input the user loses the ability to eg  scroll the page from the keyboard  If unexpected  this can be annoying  so only auto-focus when you re pretty sure that using the form field is going to be what the user wants to do  ie  if you re Google

User · Answer

This gets the first of any visible common input  including textareas and select boxes   This also makes sure they aren t hidden  disabled or readonly   it also allows for a target div  which I use in my software  ie  first input inside of this form       input visible enabled not  readonly   textarea visible enabled not  readonly   select visible enabled not  readonly          target  first   focus

User · Answer

You should be able to use clientHeight instead of checking for the display attribute  since a parent could be hiding this element   function setFocus         var forms   document forms                for  var i   0  i  lt  forms length  i                  for  var j   0  j  lt  forms i  length  j                  var widget   forms i  j                   if   widget  amp  amp  widget domNode  amp  amp  widget domNode clientHeight  gt  0   amp  amp  typeof widget focus      function                     amp  amp   typeof widget disabled      undefined     widget disabled     false                    amp  amp   typeof widget readOnly      undefined     widget readOnly     false                             widget focus                            break

User · Answer

If you re using the Prototype JavaScript framework then you can use the focusFirstElement method   Form focusFirstElement document forms 0

User · Answer

With AngularJS    angular element   Element   0  focus

User · Answer

If you re using the Prototype JavaScript framework then you can use the focusFirstElement method   Form focusFirstElement document forms 0

User · Answer

You can also try jQuery based method     document  ready function            form first   input type  hidden  first   focus

User · Answer

document forms 0  elements 0  focus      This can be refined using a loop to eg  not focus certain types of field  disabled fields and so on  Better may be to add a class  autofocus  to the field you actually do want focused  and loop over forms i  elements j  looking for that className   Anyhow  it s not normally a good idea to do this on every page  When you focus an input the user loses the ability to eg  scroll the page from the keyboard  If unexpected  this can be annoying  so only auto-focus when you re pretty sure that using the form field is going to be what the user wants to do  ie  if you re Google

User · Answer

With AngularJS    angular element   Element   0  focus

User · Answer

There s a write-up here that may be of use  Set Focus to First Input on Web Page

User · Answer

Without third party libs  use something like    const inputElements   parentElement getElementsByTagName  input     if  inputChilds length  gt  0        inputChilds item 0  focus          Make sure you consider all form element tags  rule out hidden disabled ones like in other answers and so on

User · Answer

You also need to skip any hidden inputs   for  var i   0  document forms 0  elements i  type     hidden   i     document forms 0  elements i  focus

User · Answer

If you re using the Prototype JavaScript framework then you can use the focusFirstElement method   Form focusFirstElement document forms 0

User · Answer

You can also try jQuery based method     document  ready function            form first   input type  hidden  first   focus

User · Answer

Putting this code at the end of your body tag will focus the first visible  non-hidden enabled element on the screen automatically   It will handle most cases I can come up with on short notice    lt script gt       function            var forms   document forms                for var i   0  i  lt  forms length  i                 for var j   0  j  lt  forms i  length  j                     if  forms i  j  readonly    undefined  amp  amp  forms i  j  type     hidden   amp  amp  forms i  j  disabled    true  amp  amp  forms i  j  style display     none                        forms i  j  focus                        return                                                       lt  script gt

User · Answer

You also need to skip any hidden inputs   for  var i   0  document forms 0  elements i  type     hidden   i     document forms 0  elements i  focus

User · Answer

Without third party libs  use something like    const inputElements   parentElement getElementsByTagName  input     if  inputChilds length  gt  0        inputChilds item 0  focus          Make sure you consider all form element tags  rule out hidden disabled ones like in other answers and so on

User · Answer

You can also try jQuery based method     document  ready function            form first   input type  hidden  first   focus

User · Answer

Putting this code at the end of your body tag will focus the first visible  non-hidden enabled element on the screen automatically   It will handle most cases I can come up with on short notice    lt script gt       function            var forms   document forms                for var i   0  i  lt  forms length  i                 for var j   0  j  lt  forms i  length  j                     if  forms i  j  readonly    undefined  amp  amp  forms i  j  type     hidden   amp  amp  forms i  j  disabled    true  amp  amp  forms i  j  style display     none                        forms i  j  focus                        return                                                       lt  script gt

User · Answer

You also need to skip any hidden inputs   for  var i   0  document forms 0  elements i  type     hidden   i     document forms 0  elements i  focus

User · Answer

There s a write-up here that may be of use  Set Focus to First Input on Web Page

User · Answer

For those who use JSF2 2  and cannot pass autofocus as an attribute without value to it  use this    p autofocus  true    And add it to the namespace p  Also often used pt  Whatever you like     lt html     xmlns p  http   java sun com jsf passthrough  gt

User · Answer

I needed to solve this problem for a form that is being displayed dynamically in a modal div on my page  and unfortunately autofocus isn t honored when the containing div is shown by changing the display property  at least not in Chrome   I don t like any of the solutions that require my code to infer which control I should set the focus to  because of the complications of hidden or zero-sized inputs  etc  My solution was to set the autofocus attribute on my input anyway  then set the focus in my code when I show the div  form querySelector    autofocus    focus

User · Answer

You can also try jQuery based method     document  ready function            form first   input type  hidden  first   focus

User · Answer

Tried lots of the answers above and they weren t working  Found this one at  http   www kolodvor net 2008 01 17 set-focus-on-first-field-with-jquery  comment-1317 Thank you Kolodvor       input text visible first   focus

User · Answer

Although this doesn t answer the question  requiring a common script   I though it might be useful for others to know that HTML5 introduces the  autofocus  attribute    lt form gt     lt input type  text  name  username  autofocus gt     lt input type  password  name  password  gt     lt input type  submit  value  Login  gt   lt  form gt    Dive in to HTML5 has more information

User · Answer

document forms 0  elements 0  focus      This can be refined using a loop to eg  not focus certain types of field  disabled fields and so on  Better may be to add a class  autofocus  to the field you actually do want focused  and loop over forms i  elements j  looking for that className   Anyhow  it s not normally a good idea to do this on every page  When you focus an input the user loses the ability to eg  scroll the page from the keyboard  If unexpected  this can be annoying  so only auto-focus when you re pretty sure that using the form field is going to be what the user wants to do  ie  if you re Google

User · Answer

Putting this code at the end of your body tag will focus the first visible  non-hidden enabled element on the screen automatically   It will handle most cases I can come up with on short notice    lt script gt       function            var forms   document forms                for var i   0  i  lt  forms length  i                 for var j   0  j  lt  forms i  length  j                     if  forms i  j  readonly    undefined  amp  amp  forms i  j  type     hidden   amp  amp  forms i  j  disabled    true  amp  amp  forms i  j  style display     none                        forms i  j  focus                        return                                                       lt  script gt

User · Answer

This gets the first of any visible common input  including textareas and select boxes   This also makes sure they aren t hidden  disabled or readonly   it also allows for a target div  which I use in my software  ie  first input inside of this form       input visible enabled not  readonly   textarea visible enabled not  readonly   select visible enabled not  readonly          target  first   focus

User · Answer

There s a write-up here that may be of use  Set Focus to First Input on Web Page

User · Answer

You should be able to use clientHeight instead of checking for the display attribute  since a parent could be hiding this element   function setFocus         var forms   document forms                for  var i   0  i  lt  forms length  i                  for  var j   0  j  lt  forms i  length  j                  var widget   forms i  j                   if   widget  amp  amp  widget domNode  amp  amp  widget domNode clientHeight  gt  0   amp  amp  typeof widget focus      function                     amp  amp   typeof widget disabled      undefined     widget disabled     false                    amp  amp   typeof widget readOnly      undefined     widget readOnly     false                             widget focus                            break

User · Answer

without jquery  e g  with regular javascript   document querySelector  form input not  type hidden     focus     works on Safari but not Chrome 75  april 2019

User · Answer

I m using this      form first   input select textarea   filter   not  readonly  readonly    not  disabled  disabled    not  type  hidden      first   focus

[javascript] How do I set the focus to the first input element in an HTML form independent from the id?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to focus