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

95

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, pero no sé 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 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>

Se agradece mucho la ayuda :-)

javascript html focus onload autofocus Chris
fuente

Respuestas:

36

Esta línea:

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

debería tener un atributo id , así:

<input type="password" name="PasswordInput" id="PasswordInput"/>
Saikios
fuente
¿Eso realmente establecerá el enfoque de entrada? ¿En qué navegador lo probaste?
Peter Mortensen
@PeterMortensen cuando probé esto hace 9 años fue en firefox, chrome e ie :)
Saikios
326

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

<input type="text" name="fname" autofocus>
LinuxLars
fuente
7
ie9: stackoverflow.com/questions/8280988/…
jedierikb
@BhaveshGangani autofocusno es compatible con Internet Explorer 9 y versiones anteriores.
Michel Ayres
4
Aquí hay una tabla de compatibilidad para el enfoque automático : caniuse.com/#feat=autofocus
Oreo
5

Este es uno de los problemas comunes con IE y solucionarlo es simple. Agregue .focus () dos veces a la entrada.

Reparar :-

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

Y llame a FocusOnInput () en $ (documento) .ready (function () {.....};

Kumar Kirti
fuente
1

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();
}
D Blues
fuente