JavaScriptがHTMLフォーム要素にフォーカスを設定

332

テキストボックスが含まれているWebフォームがあります。デフォルトでテキストボックスにフォーカスを設定するにはどうすればよいですか？

このようなもの：

<body onload='setFocusToTextBox()'>

だから誰かがそれを手伝ってくれる？JavaScriptでテキストボックスにフォーカスを設定する方法がわかりません。

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

— テンスター
ソース

21

と同じくらい簡単document.getElementById('your_text_box_id').focus();です。

— Teemu 2013

576

これを行う。

あなたの要素がこのようなものなら...

<input type="text" id="mytext"/>

あなたのスクリプトは

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

— モーカーン
ソース

3

あなたは、Web APIの他の部分を使用して文書を（例えばスキャンする必要があるだろうDocument.forms、Document.getelementsByTagNameまたはNode.childNodes）といくつかの要素の特定のプロパティのための既知の文書構造や外観に依存しているのどちらか。

— peterph 2014年

40

または明白な答え... IDを付けてください;）

— 関連する'27

4

IDが過剰に指定されているため、使用しないことをお勧めします。代わりに、名前またはクラスを使用します。その場合は、document.querySelector（ "[name = 'myText']"）またはdocument.querySelector（ "。myText"）を使用して、入力要素への参照を取得します。

— Chris Love

12

@ChrisLove興味深いアドバイス。なぜidが「指定超過」であり、正確には何が問題なのですか？IDを使用すると、よりシンプルで正確になり、それを見つけるためのコードがわずかに速くなります。それは、私にとって、最も明白で賢明なことのように思えます。可能であれば。

— PandaWood 2016年

4

@ChrisLoveこれはCSSセレクターを過剰に指定するのではなく、HTML ID属性を設定します。CSS処理がDOMセレクターを解析する方法の特異性は、HTMLでのIDおよびクラス属性の動作の問題ではありません。JSをアタッチする場合と同じDOMセレクターを使用してCSSをアタッチすることはお勧めできません。つまり、説明した差別化を維持できる

— Toni Leigh

142

それだけの価値がある場合はautofocus、HTML5互換ブラウザーで属性を使用できます。バージョン10以降のIEでも機能します。

<input name="myinput" value="whatever" autofocus />

— より良いオリーブ
ソース

51

これは、ページが最初に読み込まれたときにフォーカスを設定する場合にのみ機能することに注意してください。入力に応答して後でフォーカスを設定するために使用することはできません。

— マーティンカーニー2014

IOS Safari（caniuse.com/#search=autofocus）が.focus（）とOpera Mini（caniuse.com/#search=focus）との互換性がない場合、autofocus属性は互換性がないと思います

— lfrodrigues

3

コンソールからフォーカスしようとしている場合は不可能であることに注意してください！

— または、チョバン

65

通常、テキストボックスに焦点を合わせると、スクロールして表示する必要があります

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

それが役立つかどうかを確認してください。

— カーンTO
ソース

2

フィールドが画面から外れている場合、これは小さな画面で実際の頭痛の種になる可能性があります:-)

— Toni Leigh

固定されているヘッダーバーがある場合、textbox.scrollIntoView（false）を使用する必要がある場合があります。これは、要素を上ではなく下に設定するだけです。

— DeadlyChambers 2017年

30

あなたのコードが：

<input type="text" id="mytext"/>

そして、JQueryを使用している場合は、これも使用できます：

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

最初に入力を描画する必要があることに注意してください $(document).ready()

— リチャードレベコ
ソース

11

基本的な質問でjQueryの影響がリモートにないため、これに反対しました。OPは純粋ジャバスクリプト滞在したかった

— Fallenreaper

11

まあ、あなたには理由があります、私は間違っていましたが、とにかくそれは役に立つと思います。

— Richard Rebeco

4

jQueryがすでに使用されており、jQuery選択オブジェクトとして要素を使用しているプロジェクトでは、バニラJSを使用するよりも一貫性を保つ方が良いため、これを支持しています。

— パラダイト2016年

8

egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrectstackoverflowのヘルプセンターによると、@ Fallenreaperの反対投票はのためです。これは、これらのカテゴリのどこにもありません。支援はOPに限定されません、そうですか？

— Gellie Ann

@GellieAnnこれは答えですが、OPの質問の範囲外です。彼がバニラJavaScriptを使用している理由があり、他のフレームワークに言及し、それにつながるようにポインターまたはヒントを与え、理由を与えることができますが、質問の範囲内から答えを解決する必要があります。したがって、私は自分の反対票を支持します。

— Fallenreaper 2017年

20

単純なJavascriptの場合は、以下を試してください。

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

— 一口
ソース

3

私はこれを使っていました：

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

つまり、HTML 5でautofocus属性を使用するだけです。

注意：私は、この古いスレッドを更新したかったのですが、質問の例に加えて、まだこれを読んでいる人のために、より新しくて簡単な更新を示しました。;）

— RajnishCoder
ソース

1

前述のように、document.formsも機能します。

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form

— マック
ソース

AFAIKフォームに「name」属性がない

— Marecky

フォームには長い間「名前」がありましたが、HTML5ではまだあります。参照w3.org/TR/html5/forms.html#the-form-element

— Macの

1

もしあなた<input>や<textarea>属性がしましたid=mytext、その後使用

mytext.focus();

コードスニペットを表示

function setFocusToTextBox() {
    mytext.focus();
}

<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

スニペットを展開

— カミル・キエチェフスキー
ソース

0

window.onloadは最初にフォーカスを置くことですonblurはtextareaの外側をクリックしている間にフォーカスを置くか、テキスト領域のぼかしを避けます

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

— ßãlãjî
ソース