Menyetel fokus pada kotak input HTML saat pemuatan halaman

96

Saya mencoba menyetel fokus default pada kotak masukan saat halaman dimuat (contoh: google). Halaman saya sangat sederhana, namun saya tidak tahu bagaimana melakukan ini.

Inilah yang saya dapatkan sejauh ini:

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

Kenapa itu tidak berhasil sementara ini berfungsi dengan baik?

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

Bantuan sangat dihargai :-)

javascript html focus onload autofocus Chris
sumber

Jawaban:

36

Garis ini:

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

harus memiliki atribut id , seperti:

<input type="password" name="PasswordInput" id="PasswordInput"/>
Saikios
sumber
Akankah itu benar-benar mengatur fokus input? Di browser mana Anda mencobanya?
Peter Mortensen
@PeterMortensen ketika saya menguji ini 9 tahun yang lalu adalah di firefox, chrome dan yaitu :)
Saikios
327

Dan Anda dapat menggunakan atribut autofokus HTML5 (berfungsi di semua browser saat ini kecuali IE9 dan di bawahnya). Panggil skrip Anda hanya jika IE9 atau sebelumnya, atau versi lama dari browser lain.

<input type="text" name="fname" autofocus>
LinuxLars
sumber
7
ie9: stackoverflow.com/questions/8280988/…
jedierikb
@BhaveshGangani autofocustidak didukung di Internet Explorer 9 dan versi sebelumnya.
Michel Ayres
4
Berikut tabel kompatibilitas untuk autofokus : caniuse.com/#feat=autofocus
Oreo
5

Ini adalah salah satu masalah umum dengan IE dan memperbaikinya sederhana. Tambahkan .focus () dua kali ke input.

Perbaiki: -

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

Dan panggil FocusOnInput () di $ (document) .ready (function () {.....};

Kumar Kirti
sumber
2

Anda juga bisa menggunakan:

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

Dan kemudian di JavaScript Anda:

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