jQueryを使用してページ読み込み時にフォーム入力テキストフィールドに焦点を合わせる方法は？

238

これはおそらく非常に単純ですが、ページのロード時にテキストボックスでカーソルを点滅させる方法を誰かに教えてもらえますか？

— クリス
ソース

96

ここでは簡単な質問は気にしません。

— DOKの

リンクの下にsohailアリフからの返信を確認してください：stackoverflow.com/questions/18054459/...

— Sohailアリフ

379

最初のテキストフィールドにフォーカスを設定します。

 $("input:text:visible:first").focus();

これは最初のテキストフィールドも行いますが、[0]を別のインデックスに変更できます。

$('input[@type="text"]')[0].focus();

または、IDを使用できます。

$("#someTextBox").focus();

— DOK
ソース

2

ダイアログを使用する場合、上記が機能しない場合はこの回答を参照してください。stackoverflow.com

— Matt Canty

1

$('input[type="text"]').get(0).focus(); ...私のために働いた

— Rav

91

これにはHTML5autofocusを使用できます。jQueryやその他のJavaScriptは必要ありません。

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

これはIE9以下では機能しないことに注意してください。

— アンドリュー・リュー
ソース

オートフォーカスは、IE11のいずれかで動作しませんstackoverflow.com/questions/34068302/...

— BA TabNabber

これは私のシナリオでは機能しますが、選択された回答は何らかの理由で機能しませんでした。

— Vishnu YS

27

承知しました：

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

— パンディンカス
ソース

2

スクリプトをhtml要素の後に置くことをお勧めします。

— Ali Sheikhpour 2018

1

@AliSheikhpourスクリプトはdom readyラッパー内にあるため、html要素の前であってもかまいませんが、頭に入れるべきではありません。

— Popnoodles

22

なぜ誰もがこのように単純なものにjQueryを使用しているのですか。

<body OnLoad="document.myform.mytextfield.focus();">

— TD_Nijboer
ソース

15

質問がjQueryとしてタグ付けされているからです。

— Adarsh Madrecha

18

これを行う前に、ユーザーインターフェイスについて検討してください。私は（どの回答もそうではありませんでしたが）jQueryのready()関数を使用してドキュメントがロードされるときにこれを行うと想定しています。ドキュメントが読み込まれる前にユーザーが既に別の要素にフォーカスしている場合（これは完全に可能です）、フォーカスが奪われるのは非常にイライラします。

これを確認するonfocusには、各<input>要素に属性を追加して、ユーザーがすでにフォームフィールドにフォーカスしているかどうかを記録し、次の場合はフォーカスを盗まないようにします。

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

— ティム・ダウン
ソース

2

あなたの視点は技術的に正しいだけでなく、可能な限り最高のUXへの配慮も絶妙です。ブラボー！

— Folusho Oladipo

12

HTML：

  <input id="search" size="10" />

jQuery：

$("#search").focus();

— ブレンダン
ソース

1

html5を使用している場合autofocus、input要素に属性を追加するだけですか？

— Adarsh Madrecha

その属性はどのように使用され、親フォームが表示されるとすぐにフォーカスされる要素になりますか？

— Khom Nazid

8

古い質問にぶつかってごめんなさい。私はこれをグーグル経由で見つけた。

また、複数のセレクターを使用できるため、1つの特定のタイプだけでなく、任意のフォーム要素をターゲットにできることにも注意してください。

例えば。

$('#myform input,#myform textarea').first().focus();

これにより、最初に見つかった入力またはテキストエリアがフォーカスされます。もちろん、他のセレクターをミックスに追加することもできます。特定の要素のタイプが最初であることが確実でない場合、または少し一般的/再利用可能なものが必要な場合は、Hnady。

— アンドリュー・カルダー
ソース

素晴らしい提案@Andrew。

— 2013年

6

これは私が使用したいものです：

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

— Poveilleux
ソース

3

物事を行うには悪い方法です。ドキュメントの読み込みで<input>に集中するautofocusには、HTML5で提供される属性を使用するだけです

— OverCoder '24

3

入力後に配置

<script type="text/javascript">document.formname.inputname.focus();</script>

— ビル・マーキス
ソース

0

これを達成するためのシンプルで最も簡単な方法

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

— ムハンマドオワイス
ソース

0

行$('#myTextBox').focus()だけではカーソルはテキストボックスに置かれません。代わりに次を使用します。

$('#myTextBox:text:visible:first').focus();

— デビッドソプコ
ソース