ページ読み込み時にHTML入力ボックスにフォーカスを設定する

95

ページが読み込まれたときに入力ボックスにデフォルトのフォーカスを設定しようとしています（例：google）。私のページは非常に単純ですが、これを行う方法がわかりません。

これは私がこれまでに得たものです：

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

これが正常に機能しているのに、なぜ機能しないのですか？

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

ヘルプは大歓迎です:-)

— クリス
ソース

36

この行：

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

次のようにid属性が必要です：

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

— サイキオス
ソース

実際に入力フォーカスが設定されますか？どのブラウザを試しましたか？

— Peter Mortensen

@PeterMortensenが9年前にこれをテストしたときは、Firefox、

— Chrome、IEでした

326

また、HTML5のautofocus属性を使用できます（IE9以下を除くすべての現在のブラウザーで機能します）。IE9以前、または他のブラウザーの古いバージョンの場合にのみ、スクリプトを呼び出します。

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

— LinuxLars
ソース

7

IE9：stackoverflow.com/questions/8280988/...

— jedierikb

@BhaveshGangani autofocusは、Internet Explorer 9以前のバージョンではサポートされていません。

— ミシェルエアーズ2014

4

autofocusの互換性の表は次のとおり

— Oreo

5

これはIEの一般的な問題の1つであり、これに対する修正は簡単です。入力に.focus（）を2回追加します。

修正：-

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

そして$（document）.ready（function（）{.....};でFocusOnInput（）を呼び出します。

— クマール・キルティ
ソース

1

あなたも使うことができます：

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

そしてあなたのJavaScriptで：

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

— Dブルース
ソース