Establecer el foco en un cuadro de entrada HTML al cargar la página

Estoy tratando de establecer el enfoque predeterminado en un cuadro de entrada cuando se carga la página (ejemplo: google). Mi página es muy simple, sin embargo, no puedo averiguar cómo hacer esto.

Esto es lo que tengo hasta ahora:

<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>

¿Cómo es que eso no funciona mientras que esto funciona bien?

<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>

La ayuda es muy apreciada: -)

Author: Chris, 2010-08-01
Source

4 answers

Esta línea:

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

Debe tener un atributo id , así: 

<input type="password" name="PasswordInput" id="PasswordInput"/>
 33
Author: Saikios,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-05 15:36:11

Y puede usar el atributo autofocus de HTML5 (funciona en todos los navegadores actuales, excepto IE9 y versiones posteriores). Solo llame a su script si es IE9 o anterior, o una versión anterior de otros navegadores.

<input type="text" name="fname" autofocus>
 280
Author: LinuxLars,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-14 06:47:00

Este es uno de los problemas comunes con IE y arreglar esto es simple. Añadir .focus() dos veces a la entrada.

Fix: - 

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

Y llama a FocusOnInput () en document (document).ready (function () {.....};

 3
Author: Kumar Kirti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-31 10:44:40

También puedes usar: 

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

Y luego en tu JavaScript: 

function focusOnInput() {
    document.forms["passwordForm"]["passwordInput"].focus();
}
 0
Author: D Blues,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-16 17:11:55