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

95

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>

Wieso funktioniert das nicht, solange das 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 :-)

— Chris
quelle

36

Diese Linie:

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

sollte ein id- Attribut haben, wie folgt:

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

— Saikios
quelle

Wird das tatsächlich den Eingabefokus setzen? Welchen Browser haben Sie anprobiert?

— Peter Mortensen

@ PeterMortensen, als ich dies vor 9 Jahren getestet habe, war auf Firefox, Chrom und dh :)

— Saikios

324

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 sich um IE9 oder früher oder eine ältere Version anderer Browser handelt.

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

— LinuxLars
quelle

7

ie9: stackoverflow.com/questions/8280988/…

— jedierikb

@BhaveshGangani autofocuswird in Internet Explorer 9 und früheren Versionen nicht unterstützt.

— Michel Ayres

4

Hier ist eine Kompatibilitätstabelle für Autofokus : caniuse.com/#feat=autofocus

— Oreo

5

Dies ist eines der häufigsten Probleme mit dem Internet Explorer. Die Behebung dieses Problems ist einfach. Fügen Sie der Eingabe zweimal .focus () hinzu.

Fix: -

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

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

— Kumar Kirti
quelle

1

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();
}

— D Blues
quelle