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

Question 1

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 ist, was ich bisher habe:

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

Question 2

Und Sie können das Autofokus-Attribut von HTML5 verwenden (funktioniert in allen aktuellen Browsern außer IE9 und darunter). Rufen Sie Ihr Skript nur auf, wenn es IE9 oder früher oder eine ältere Version anderer Browser ist.

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

Question 3

Diese Linie:

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

sollte eine haben Ich würde Attribut, etwa so:

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

Question 4

Dies ist eines der häufigsten Probleme mit IE und die Lösung dafür ist einfach. Fügen Sie .focus() zweimal zur Eingabe hinzu.

Beheben :-

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

Und rufen Sie FocusOnInput() auf $(document).ready(function () {…..};

Question 5

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 Ihrem JavaScript:

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