Définition du focus sur une zone de saisie HTML lors du chargement de la page

95

J'essaie de définir le focus par défaut sur une zone de saisie lorsque la page se charge (exemple: google). Ma page est très simple, mais je n'arrive pas à comprendre comment faire cela.

Voici ce que j'ai jusqu'à présent:

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

javascript html focus onload autofocus Chris
la source

Réponses:

36

Cette ligne:

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

devrait avoir un attribut id , comme ceci:

<input type="password" name="PasswordInput" id="PasswordInput"/>
Saikios
la source
Cela définira-t-il réellement le focus d'entrée? Sur quel navigateur avez-vous essayé?
Peter Mortensen
@PeterMortensen quand j'ai testé cela il y a 9 ans était sur Firefox, Chrome et ie :)
Saikios
326

Et vous pouvez utiliser l'attribut autofocus de HTML5 (fonctionne dans tous les navigateurs actuels sauf IE9 et les versions antérieures). N'appelez votre script que s'il s'agit d'IE9 ou d'une version antérieure, ou d'une version plus ancienne d'autres navigateurs.

<input type="text" name="fname" autofocus>
LinuxLars
la source
7
ie9: stackoverflow.com/questions/8280988/…
jedierikb
@BhaveshGangani autofocusn'est pas pris en charge dans Internet Explorer 9 et les versions antérieures.
Michel Ayres
4
Voici un tableau de compatibilité pour l' autofocus : caniuse.com/#feat=autofocus
Oreo
5

C'est l'un des problèmes courants avec IE et le correctif est simple. Ajoutez deux fois .focus () à 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 () {.....};

Kumar Kirti
la source
1

Vous pouvez également utiliser:

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

Et puis dans votre JavaScript:

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