.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]ページ表示時にテキストボックスにフォーカスを設定するには?
Windowsアプリのコントロールで[Tab]キーによるフォーカスを与えないようにするには?
Windowsフォームのロード時に任意のコントロールへフォーカスを設定するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH