web-dev-qa-db-fra.com

Définir le focus sur une zone de saisie HTML au chargement de la page

J'essaie de définir le focus par défaut sur une zone de saisie lors du chargement de la page (exemple: google) . Ma page est très simple, mais je ne sais pas comment faire.

C'est ce que j'ai jusqu'ici:

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

Comment se fait-il que cela ne fonctionne pas alors que cela fonctionne 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>

L'aide est très appréciée :-)

javascripthtmlfocusonloadautofocus
88
Chris

Cette ligne:

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

devrait avoir un attribut id , comme suit:

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

Et vous pouvez utiliser l'attribut autofocus de HTML5 (fonctionne dans tous les navigateurs actuels sauf IE9 et inférieur). Appelez votre script uniquement s'il s'agit d'IE9 ou d'une version antérieure, ou d'une version plus ancienne des autres navigateurs.

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

C’est l’un des problèmes courants avec IE et la solution est simple. Ajoutez .focus () deux fois à l’entrée.

Réparer :-

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

Et appelez FocusOnInput () sur $ (document) .ready (function () {.....};

4
Kumar Kirti

Vous pouvez aussi utiliser:

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

Et ensuite dans votre JavaScript:

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