2010-08-01 15 views
80

Estoy tratando de establecer el enfoque predeterminado en un cuadro de entrada cuando la página se carga (ejemplo: google). Mi página es muy simple, pero no puedo encontrar la manera de hacerlo.Establecer foco en un cuadro de entrada HTML en la página carga

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> 

ayuda es muy apreciada :-)

Respuesta

33

Esta línea:

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

debe tener un atributo ID , así:

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

y se puede utilizar Atributo de enfoque automático de HTML5 (funciona en todos los navegadores actuales excepto IE9 y bel Ay). Solo llame a su script si es IE9 o anterior, o una versión anterior de otros navegadores.

<input type="text" name="fname" autofocus> 
+24

“funciona en todos los navegadores actuales” - que realmente depende de su definición de "todos los navegadores actuales". –

+7

ie9: http://stackoverflow.com/questions/8280988/how-to-make-input-autofocus-in-internet-explorer – jedierikb

+0

@BhaveshGangani ['autofocus' es no es compatible con Internet Explorer 9 y versiones anteriores.] (http://www.w3schools.com/tags/att_input_autofocus.asp) –

0

También es posible usar:

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

Y luego, en el JavaScript:

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

Este es uno de los problemas comunes con IE y solución para esto es simple. Agregue .focus() dos veces a la entrada.

Fix: -

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

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

Cuestiones relacionadas