Impostazione dello stato attivo su una casella di input HTML al caricamento della pagina

95

Sto cercando di impostare il focus predefinito su una casella di input quando la pagina viene caricata (esempio: google). La mia pagina è molto semplice, ma non riesco a capire come farlo.

Questo è quello che ho ottenuto finora:

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

Come mai questo non funziona mentre funziona bene?

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

L'aiuto è molto apprezzato :-)

— Chris
fonte

36

Questa linea:

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

dovrebbe avere un attributo id , in questo modo:

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

— Saikios
fonte

Ciò imposterà effettivamente il focus di input? Su quale browser l'hai provato?

— Peter Mortensen

@PeterMortensen quando l'ho provato 9 anni fa era su Firefox, Chrome e ie :)

— Saikios

326

E puoi usare l'attributo autofocus di HTML5 (funziona in tutti i browser attuali tranne IE9 e sotto). Chiama il tuo script solo se è IE9 o precedente o una versione precedente di altri browser.

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

— LinuxLars
fonte

7

IE9: stackoverflow.com/questions/8280988/...

— jedierikb

@BhaveshGangani autofocusnon è supportato in Internet Explorer 9 e versioni precedenti.

— Michel Ayres

4

Ecco una tabella di compatibilità per l' autofocus : caniuse.com/#feat=autofocus

— Oreo

5

Questo è uno dei problemi più comuni con IE e risolverlo è semplice. Aggiungi .focus () due volte all'input.

Correzione: -

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

E chiama FocusOnInput () su $ (document) .ready (function () {.....};

— Kumar Kirti
fonte

1

Potresti anche usare:

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

E poi nel tuo JavaScript:

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

— D Blues
fonte