web-dev-qa-db-de.com

Einstellen des Fokus auf ein HTML-Eingabefeld beim Laden der Seite

Ich versuche, den Standardfokus auf ein Eingabefeld zu setzen, wenn die Seite geladen wird (Beispiel: google) . Meine Seite ist sehr einfach, aber ich kann nicht herausfinden, wie das geht.

Das habe ich bisher:

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

Wie kommt es, dass das nicht funktioniert, während dies gut funktioniert?

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

Hilfe wird sehr geschätzt :-)

javascripthtmlfocusonloadautofocus
88
Chris

Diese Linie:

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

sollte ein id -Attribut haben:

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

Außerdem können Sie das Autofocus-Attribut von HTML5 verwenden (funktioniert in allen aktuellen Browsern außer IE9 und darunter). Rufen Sie Ihr Skript nur auf, wenn es sich um IE9 oder eine frühere Version oder eine ältere Version anderer Browser handelt.

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

Dies ist eines der häufigsten Probleme mit IE, und die Behebung dieses Problems ist einfach. Fügen Sie zweimal .focus () zur Eingabe hinzu.

Fix: -

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

Und rufen Sie FocusOnInput () für $ (document) .ready (function () {.....} auf.

4
Kumar Kirti

Sie könnten auch verwenden:

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

Und dann in deinem JavaScript:

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