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

javascript html focus onload autofocus Chris
quelle

Antworten:

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