.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メールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT