Webページが読み込まれたときに、どのようにしてフォーカスをテキストボックスに自動的に設定しますか?


回答:


245

jqueryを使用している場合:

$(function() {
  $("#Box1").focus();
});

またはプロトタイプ:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

またはプレーンjavascript:

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

ただし、これにより他のロードハンドラが置き換えられることに注意してください。オンロードハンドラを置き換えるのではなく、安全に追加する方法については、GoogleでaddLoadEvent()を検索してください。


3
ハンドラーをbody要素に配置しませんか?参照はありますか?ありがとう
Alexander Torstling 2010

7
JavaScriptをHTMLから分離する方がずっとクリーンだからです。HTMLの視覚要素にスクリプト動作を追加する必要があります。
Ben Scheirman、2010

94

HTMLでは、すべてのフォームフィールドにautofocus属性があります。Dive Into HTML 5には、優れたチュートリアルがあります。残念ながら、現在のところ、10未満のIEバージョンではサポートされていません。

HTML 5属性を使用してJSオプションにフォールバックするには:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

JSはHTML要素の下にあるため、jQuery、onload、またはイベントハンドラーは必要ありません。

編集:もう1つの利点は、一部のブラウザーではJavaScriptオフで動作し、古いブラウザーをサポートしたくない場合はJavaScriptを削除できることです。

編集2:Firefox 4でautofocus属性がサポートされるようになり、IEはサポートされなくなりました。


3
とは何autofocus="aufofocus"ですか?あなたが提供したすべてのリンクは、属性を追加するように言っています:autofocus
Gerrat、2014

6
XHTMLとHTML4の時代にはattribute="value"、ブール属性に対して行うのが一般的でした。HTML5には「空の属性構文」が付属しており、冗長性は失われました。今やることができる<input checked disabled autofocus data-something>
dave1010 '12

私はこのアプローチが好きです...そのコードは入力に属しています...入力とブームを取り除き、関連するコードはそこにあります...最近、私たちはとても迷子になっています...今、単純化しようと一丸となって行きます。 ..
セルジュ

16

あなたはjavascriptを使う必要があります:

<BODY onLoad="document.getElementById('myButton').focus();">

@Benは、このようなイベントハンドラーを追加してはならないことに注意しています。これは別の質問ですが、この関数を使用することをお勧めします。

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

次に、ページにaddLoadEventを呼び出し、目的のテキストボックスにフォーカスを設定する関数を参照します。


14

テキストフィールドにautofocusと書くだけです。これは簡単で、次のように機能します。

 <input name="abc" autofocus></input>

お役に立てれば。


1
これは良いですが、あなたのスタイルをスライドさせるとの手順を持っている、それは有用ではない場合、問題は、あるESP入力タイプは、exのためのステップ3またはステップ4の上にある場合
コービー・ブライアント

12

次のようにjqueryを使用すると、簡単に行うことができます。

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

でこの関数を呼び出す$(document).ready()

つまり、DOMの準備ができると、この関数が実行されます。

READY関数の詳細については、http//api.jquery.com/ready/を参照してください。


11

単純なバニラHTMLとJavaScriptの使用

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

.netフレームワークとasp.net 2.0以上を使用している人にとっては、取るに足らないことです。フレームワークの古いバージョンを使用している場合は、上記と同様のJavaScriptを作成する必要があります。

OnLoadハンドラー(Visual Studioで提供されるストックページテンプレートを使用している場合は、一般にpage_load)で使用できます。

C#

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(*アンダースコアを適切にレンダリングすることをコードブロックで拒否したため、通常はPage_Loadである関数名からアンダースコア文字を削除しました!アンダースコアをエスケープせずにレンダリングする方法をマークアップドキュメントで確認できませんでした。)

お役に立てれば。


7

私見、ページで最初に表示され、有効になっているテキストフィールドを選択する「最もクリーンな」方法は、jQueryを使用して次のようなことを行うことです。

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

お役に立てば幸い...

ありがとう...


6
<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>  

5

一般的なアドバイスとして、アドレスバーからフォーカスを奪わないことをお勧めします。(ジェフはすでにそれについて話しました。

Webページの読み込みには時間がかかる場合があります。つまり、ユーザーがpae URLを入力してからしばらくすると、フォーカスの変更が発生する可能性があります。次に、ページをロードし、フォーカスを奪ってテキストボックスに配置する間、彼は考えを変えてURLタイピングに戻る可能性があります。

それが、スタートページからGoogleを削除した唯一の理由です。

もちろん、ネットワーク(ローカルネットワーク)を制御している場合や、フォーカスの変更が重要なユーザビリティの問題を解決するためのものである場合は、先ほど言ったことをすべて忘れてください:)


場合によっては同意します。ただし、私の特定のケースでは、1つの入力ボックスだけの小さなdivをポップアップしています。ユーザーは何かを入力し、すぐにdivを閉じる必要があるため、フォーカスを設定すると便利です。
Mark Biek

2

少し違う問題がありました。私は欲しかったのautofocusですが、placeholderテキストを残したいのです。一部のブラウザーはplaceholder、フィールドがフォーカスされるとすぐにテキストを非表示にし、一部のブラウザーはそれを保持します。私は、奇妙な副作用のあるクロスブラウザーにとどまるプレースホルダーを取得するか、の使用をやめる必要がありましたautofocus

そこで、bodyタグに対して入力された最初のキーをリッスンし、そのキーをターゲット入力フィールドにリダイレクトしました。次に、関係するすべてのイベントハンドラーを強制終了して、物事をきれいに保ちます。

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/


0

autofocus入力要素に設定することが可能です

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">

-1

ASP.NETを使用している場合は、

yourControlName.Focus()

サーバーのコードで、適切なJavaScriptをページに追加します。

他のサーバー側フレームワークにも同等のメソッドがある場合があります。


-3

以下のコードを使用してください。私にとってそれは働いています

jQuery("[id$='hfSpecialty_ids']").focus()
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.