web-dev-qa-db-ja.com

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

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

javascriptjqueryhtmlfocus
217
chris

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

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

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

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

または、IDを使用することができます。

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

これには HTML5 autofocus を使うことができます。あなたはjQueryや他のJavaScriptを必要としません。

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

これはIE9以下では動作しません。

81
Andrew Liu

もちろんです。

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

なぜこんなに単純なものに誰もがjQueryを使っているのです。

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

これをする前にあなたのユーザーインターフェイスについて考えなさい。 jQueryのready()関数を使用してドキュメントをロードするときにこれを実行すると思います（ただし、いずれの答えもそうは言っていません）。ドキュメントがロードされる前にユーザーがすでに別の要素に焦点を合わせていた場合（これは完全に可能です）、ユーザーがフォーカスを失うことは非常に苛立ちです。

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

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">
18
Tim Down

HTML：

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

jQuery：

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

古い質問にぶつかって申し訳ありません。私はGoogleでこれを見つけました。

また、複数のセレクターを使用することが可能であることに注目する価値があります。したがって、特定の型だけでなく、任意のフォーム要素をターゲットにすることができます。

例えば。

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

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

8
Andrew Calder

これが私が使うことを好むものです：

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

入力後に配置

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

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

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

$('#myTextBox').focus()行だけではテキストボックスにカーソルを移動できず、代わりに次のように使用します。

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