.NET TIPS

［ASP.NET］コントロールにフォーカスをセットするには？

デジタルアドバンテージ
2004/05/21

　「TIPS：［ASP.NET］ページにJavaScriptを埋め込むには？」では、プログラム・コード内に記述したスクリプトをページ内に埋め込んでブラウザに出力するための、Pageクラス（System.Web.UI名前空間）のRegisterStartupScriptメソッドについて解説している。

　ここでは、このメソッドを利用して、指定されたコントロールにフォーカスをセットする方法について解説する。

　例えば、ページのロード時にテキストボックスにフォーカスをセットしておけば、ユーザーはページが表示された時点で、すぐに文字の入力を開始できるようになる（デフォルトではどこにもフォーカスがセットされていないため、ユーザーはまずテキストボックスをクリックする必要がある）。

コントロールにフォーカスをセットするためのスクリプト

　まず、指定されたコントロールにフォーカスをセットするための方法であるが、これは例えばJavaScriptを用いて記述すると次のようになる。

document.getElementById('myTextBox').focus();

　この記述はDHTML（Dynamic HTML）の機能を利用したものだ。簡単にいうと、「myTextBox」というIDを持ったコントロールをHTMLドキュメント全体から探し出し、フォーカスをセットするというものである（DHTMLの詳細な仕様については米マイクロソフトのMSDNにある「HTML and DHTML Reference」で参照できる）。

　このようなスクリプトをRegisterStartupScriptメソッドのパラメータとして指定し、このメソッドを呼び出せば、最終的に出力されるHTMLテキストに埋め込まれて、ページの表示時点で実行することができる。

テキストボックスにフォーカスをセットするサンプル・プログラム

　テキストボックスにあらかじめフォーカスがセットされたページを表示するサンプル・プログラムを次に示す。このプログラムでは、フォーカスをセットするコントロールを指定できるように、スクリプトの出力処理をSetFocusという名前のメソッドにまとめている。

<% @Page Language="C#" %>

<html>
<head>
  <script runat="server">
    void SetFocus(Control ctrl) {
      string script =
        "<script language='JavaScript'>"
        + "document.getElementById('"
        + ctrl.ClientID
        + "').focus(); <" + "/script>";
      RegisterStartupScript("setfocus", script);
    }

    void Page_Load(object sender, EventArgs e) {
      SetFocus(myTextBox);
    }
  </script>
</head>
<body>
  <form runat="server">
    <asp:TextBox id="myTextBox" runat="server" />
    <asp:Button id="myButton" Text="ボタン" runat="server" />
  </form>
</body>
</html>
テキストボックスにフォーカスをセットするC#のサンプル・プログラム（setfocus_cs.aspx）
　
<% @Page Language="VB" %>

<html>
<head>
  <script runat="server">
    Sub SetFocus(ByVal ctrl As Control)
      Dim script As String = _
        "<script language='JavaScript'>" _
        + "document.getElementById('" _
        + ctrl.ClientID _
        + "').focus(); <" + "/script>"
      RegisterStartupScript("setfocus", script)
    End Sub

    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
      SetFocus(myTextBox)
    End Sub
  </script>
</head>
<body>
  <form runat="server">
    <asp:TextBox id="myTextBox" runat="server" />
    <asp:Button id="myButton" Text="ボタン" runat="server" />
  </form>
</body>
</html>
テキストボックスにフォーカスをセットするVB.NETのサンプル・プログラム（setfocus_vb.aspx）

　SetFocusメソッドは、パラメータとしてControlクラス（System.Web.UI名前空間）のオブジェクトを指定するようになっているが、ASP.NETで使用できるサーバ・コントロールはすべてのこのクラスを継承しているため、このメソッドはどのようなサーバ・コントロールに対しても利用できる。

　なお、ControlクラスのClientIDプロパティからは、サーバ・コントロールを記述する際にid属性で設定された、コントロールのIDを取得できる。End of Article

カテゴリ：Webフォーム　処理対象：クライアント・スクリプト
使用ライブラリ：Pageクラス（System.Web.UI名前空間）
使用ライブラリ：Controlクラス（System.Web.UI名前空間）
関連TIPS：［ASP.NET］ページにJavaScriptを埋め込むには？
　
この記事と関連性の高い別の.NET TIPS
［ASP.NET］Webフォーム上のフォーカスを制御するには？
［ASP.NET］ページにJavaScriptを埋め込むには？
［Silverlight 2］HTML要素にフォーカスを設定するには？
Windowsアプリのコントロールで［Tab］キーによるフォーカスを与えないようにするには？
［Silverlight 2］ページ表示時にテキストボックスにフォーカスを設定するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH