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

Respuestas:


36

Esta línea:

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

debería tener un atributo id , así:

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

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



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 () {.....};


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();
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.