回答:
jqueryを使用している場合:
$(function() {
$("#Box1").focus();
});
またはプロトタイプ:
Event.observe(window, 'load', function() {
$("Box1").focus();
});
またはプレーンjavascript:
window.onload = function() {
document.getElementById("Box1").focus();
};
ただし、これにより他のロードハンドラが置き換えられることに注意してください。オンロードハンドラを置き換えるのではなく、安全に追加する方法については、GoogleでaddLoadEvent()を検索してください。
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はサポートされなくなりました。
autofocus="aufofocus"ですか?あなたが提供したすべてのリンクは、属性を追加するように言っています:autofocus。
attribute="value"、ブール属性に対して行うのが一般的でした。HTML5には「空の属性構文」が付属しており、冗長性は失われました。今やることができる<input checked disabled autofocus data-something>
あなたは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を呼び出し、目的のテキストボックスにフォーカスを設定する関数を参照します。
テキストフィールドにautofocusと書くだけです。これは簡単で、次のように機能します。
<input name="abc" autofocus></input>
お役に立てれば。
次のようにjqueryを使用すると、簡単に行うことができます。
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
でこの関数を呼び出す$(document).ready()。
つまり、DOMの準備ができると、この関数が実行されます。
READY関数の詳細については、http://api.jquery.com/ready/を参照してください。
単純なバニラ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である関数名からアンダースコア文字を削除しました!アンダースコアをエスケープせずにレンダリングする方法をマークアップドキュメントで確認できませんでした。)
お役に立てれば。
<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>
一般的なアドバイスとして、アドレスバーからフォーカスを奪わないことをお勧めします。(ジェフはすでにそれについて話しました。)
Webページの読み込みには時間がかかる場合があります。つまり、ユーザーがpae URLを入力してからしばらくすると、フォーカスの変更が発生する可能性があります。次に、ページをロードし、フォーカスを奪ってテキストボックスに配置する間、彼は考えを変えてURLタイピングに戻る可能性があります。
それが、スタートページからGoogleを削除した唯一の理由です。
もちろん、ネットワーク(ローカルネットワーク)を制御している場合や、フォーカスの変更が重要なユーザビリティの問題を解決するためのものである場合は、先ほど言ったことをすべて忘れてください:)
少し違う問題がありました。私は欲しかったの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);
autofocus入力要素に設定することが可能です
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
ASP.NETを使用している場合は、
yourControlName.Focus()
サーバーのコードで、適切なJavaScriptをページに追加します。
他のサーバー側フレームワークにも同等のメソッドがある場合があります。