Setting focus on an HTML input box on page load

Question

I'm trying to set the default focus on an input box when the page loads (example: google). My page is very simple, yet I can't figure out how to do this.

This is what I've got so far:

<html>
<head>
 <title>Password Protected Page</title>

 <script type="text/javascript">
 function FocusOnInput()
 {
 document.getElementById("PasswordInput").focus();
 }
 </script>

 <style type="text/css" media="screen">
  body, html {height: 100%; padding: 0px; margin: 0px;}
  #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
  #middle {vertical-align: middle}
  #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
 </style>
</head>
<body onload="FocusOnInput()">
 <table id="outer" cellpadding="0" cellspacing="0">
  <tr><td id="middle">
   <div id="centered">
  <form action="verify.php" method="post">
   <input type="password" name="PasswordInput"/>
  </form>
   </div>
  </td></tr>
 </table>
</body>
</html>

How come that doesn't work while this works fine?

<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
     document.getElementById("InputID").focus();
}
</script>
</head>

<body onload="FocusOnInput()">
  <form>
       <input type="text" id="InputID">
  </form>
</body>

</html>

Help is much appreciated :-)

score 376 · Answer 1 · edited Mar 12 '23 at 16:51

376

And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.

<input type="text" name="fname" autofocus />

edited Mar 12 '23 at 16:51

Jabari

5,359
3
26
32

answered Aug 01 '10 at 19:42

LinuxLars

3,840
3
15
10

7

ie9: http://stackoverflow.com/questions/8280988/how-to-make-input-autofocus-in-internet-explorer – jedierikb Jun 11 '13 at 14:06
@BhaveshGangani [`autofocus` is not supported in Internet Explorer 9 and earlier versions.](http://www.w3schools.com/tags/att_input_autofocus.asp) – Michel Ayres Sep 09 '14 at 13:58
4

Here's a compatibility table for **autofocus**: https://caniuse.com/#feat=autofocus – Oreo Oct 06 '17 at 11:55
I swear without this website I would be 90 years old already because I'd spend all my time researching. – aremmell Apr 24 '23 at 18:32

score 40 · Accepted Answer · edited Oct 05 '17 at 15:36

40

This line:

<input type="password" name="PasswordInput"/>

should have an id attribute, like so:

<input type="password" name="PasswordInput" id="PasswordInput"/>

edited Oct 05 '17 at 15:36

Oreo

529
3
16

answered Aug 01 '10 at 19:32

Saikios

3,623
7
37
51

Will that actually set the input focus? Which browser did you try it on? – Peter Mortensen Jul 01 '19 at 01:44
@PeterMortensen when I tested this 9 years ago was on firefox, chrome and ie :) – Saikios Jul 01 '19 at 16:34

score 6 · Answer 3 · answered Mar 31 '16 at 10:44

This is one of the common issues with IE and fix for this is simple. Add .focus() twice to the input.

Fix :-

function FocusOnInput() {
    var element = document.getElementById('txtContactMobileNo');
    element.focus();
    setTimeout(function () { element.focus(); }, 1);
}

And call FocusOnInput() on $(document).ready(function () {.....};

score 2 · Answer 4 · answered Sep 16 '15 at 17:11

You could also use:

<body onload="focusOnInput()">
    <form name="passwordForm" action="verify.php" method="post">
        <input name="passwordInput" type="password" />
    </form>
</body>

And then in your JavaScript:

function focusOnInput() {
    document.forms["passwordForm"]["passwordInput"].focus();
}

Setting focus on an HTML input box on page load

4 Answers4

Linked