Definir o foco em uma caixa de entrada HTML no carregamento da página

95

Estou tentando definir o foco padrão em uma caixa de entrada quando a página carrega (exemplo: google). Minha página é muito simples, mas não consigo descobrir como fazer isso.

Isso é o que eu tenho até agora:

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

Por que isso não funciona enquanto isso funciona bem?

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

A ajuda é muito apreciada :-)

javascript html focus onload autofocus Chris
fonte

Respostas:

36

Está linha:

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

deve ter um atributo id , assim:

<input type="password" name="PasswordInput" id="PasswordInput"/>
Saikios
fonte
Isso realmente definirá o foco de entrada? Em qual navegador você experimentou?
Peter Mortensen
@PeterMortensen quando testei isso 9 anos atrás estava no firefox, chrome e ie :)
Saikios 01 de
326

E você pode usar o atributo autofocus do HTML5 (funciona em todos os navegadores atuais, exceto IE9 e anteriores). Somente chame seu script se for IE9 ou anterior, ou uma versão mais antiga de outros navegadores.

<input type="text" name="fname" autofocus>
LinuxLars
fonte
7
ie9: stackoverflow.com/questions/8280988/…
jedierikb
@BhaveshGangani autofocusnão é compatível com o Internet Explorer 9 e versões anteriores.
Michel Ayres,
4
Aqui está uma tabela de compatibilidade para autofoco : caniuse.com/#feat=autofocus
Oreo
5

Este é um dos problemas comuns com o IE e a correção para isso é simples. Adicione .focus () duas vezes à entrada.

Consertar :-

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

E chame FocusOnInput () em $ (document) .ready (function () {.....};

Kumar Kirti
fonte
1

Você também pode usar:

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

E então em seu JavaScript:

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