.NET TIPS ［ASP.NET］Webフォーム上のフォーカスを制御するには？［2.0、3.0、3.5、C#、VB］ 山田 祥寛 2008/04/24

　ASP.NETページを構築する場合、フォーカスを制御したいというケースは少なくない。例えば、入力フォームではページ・ロード時に最初の入力要素に自動でフォーカスをセットしておけば、利用者はいちいちマウスでフォーカスを合わせる手間が省けるため便利だ。ささいなことではあるが、特に同一のフォームで連続して入力するようなケースでは、入力効率を大幅に向上できるだろう。また、入力項目にエラーがあった場合には単にエラー・メッセージを出力するだけでなく、エラー項目に自動でフォーカスが移動すれば、エラー個所を探す手間を省くことができるだろう。

　これらはフォーカス操作の一例にすぎないが、こうしたちょっとした気配りがユーザビリティを底上げすることがお分かりいただけるのではないか。そして、ASP.NET 1.1以前でこのようなフォーカスの制御を行うには、JavaScriptのコードを直接に記述する必要があった（方法については、「TIPS：［ASP.NET］コントロールにフォーカスをセットするには？」を参照されたい）。コード自体はごく定型的なものであるが、定型的であるからこそ、そのような操作のためにいちいち煩雑なコードを記述したくない、というのが人情というものだろう。

　そこでASP.NET 2.0以降ではクライアントサイド・スクリプトとの連携が強化され、ページ上の要素に対するフォーカスの制御も、サーバサイドのコードから自由に制御できるようになっている。本稿では、ASP.NET 2.0以降で利用可能な、いわゆる「Focus API」について解説する。

　なお、本稿では動作確認のためのサンプル・ページとして、以下のようなFocus.aspxを用意しておくものとする。

Focus.aspxのフォーム・レイアウト

フォーム上には以下のコントロールを配置する。

コントロール（ID） プロパティ 設定値 TextBox（txtName） − − Button（btnSend） Text 送信 RequiredFieldValidator（reqName） ControlToValidate txtName ErrorMessage 名前が入力されていません。 Label（lblResult） Text 初期状態です。

protected void btnSend_Click(Object sender, System.EventArgs e) {   lblResult.Text = "btnSendがクリックされました。"; } Protected Sub btnSend_Click(ByVal sender As Object, ByVal e As System.EventArgs)   lblResult.Text = "btnSendがクリックされました。" End Sub

［送信］ボタンをクリックしたときのコード（Focus.aspx）（上：C#、下：VB）

●デフォルト・フォーカスを設定する

　それでは、まずはページ・ロード時にデフォルトでフォーカスを設定する方法を見てみよう。ページ・ロード時にテキストボックスtxtNameにフォーカスをセットするには、Focus.aspxに対して、コード・エディタから以下のような記述を追加するだけだ。

<form id="form1" runat="server" DefaultFocus="txtName">

デフォルト・フォーカスを設定するコード（Focus.aspx）

　DefaultFocus属性には、フォーカスを置きたいコントロールのID値をセットする。果たして、実行してみると、初期状態でテキストボックスにフォーカスがセットされているのが確認できるはずだ。次の画面は、このコードを実行したもの。

初期状態でテキストボックスにフォーカスがセットされた

　ちなみに、ここでは静的にデフォルト・フォーカスを設定しているが、次のようにコードから動的にデフォルト・フォーカスを設定することも可能である。

protected void Page_Load(Object sender, System.EventArgs e) {   Page.SetFocus(txtName);   // txtName.Focus(); // これでもOK } Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)   Page.SetFocus(txtName)   // txtName.Focus() ' これでもOK End Sub

イベント・ハンドラからフォーカスを設定するコード（Focus.aspx）（上：C#、下：VB）

　フォーカスをセットするには、Page.SetFocusメソッド、または上のコードではコメントアウトしているが、個別のコントロールからFocusメソッドを呼び出せばよい（いずれも意味的には同じである）。先述したDefaultFocusプロパティが併せて設定されている場合も、SetFocus／Focusメソッドが呼び出された場合にはこちらの操作が優先される。

●デフォルト・ボタンを設定する

　デフォルト・ボタンとは、フォーム上で［Enter］キーを押下した場合に、（該当するボタンにフォーカスが当たっていなくても）デフォルトでクリックされたものと見なされるボタンのこと。フォームを入力する場合には、キーボードだけで操作をしていることも多いが、デフォルト・ボタンを設定しておくことでいちいち該当のボタンに［Tab］キーなどでフォーカスを移さなくても、フォームを入力し終わった時点で［Enter］キーを押すことでフォームを送信でき、操作性を向上できる。

　まずは、デフォルト・ボタンを設定しない場合の挙動を確認してみる。テキストボックス上にフォーカスが当たっている状態で［Enter］キーをクリックしてみよう。ページ下部の文字列は変わらず、ButtonコントロールbtnSendに関連付けられたClickイベント・ハンドラが実行されて「いない」ことが確認できる。

テキストボックス上で［Enter］キーを押下したとき（btnSend_Clickイベント・ハンドラが実行され「ない」）

　そこで次に、コード・エディタから<form>タグにDefaultButton属性を追加してみよう。

<form id="form1" runat="server" DefaultFocus="txtName"   DefaultButton="btnSend">

デフォルト・ボタンを設定するコード（Focus.aspx）

　DefaultButton属性には、DefaultFocus属性と同様、デフォルト・ボタンとして設定したいコントロールのID値をセットする。

　この状態でもう一度、Focus.aspxを実行し、テキストボックス上にフォーカスが当たっている状態で［Enter］キーをクリックしてみよう。今度はページ下部の文字列が書き換えられ、確かにButtonコントロールbtnSendに関連付けられたClickイベント・ハンドラが実行されていることを確認できるはずだ。

テキストボックス上で［Enter］キーを押下したとき（btnSend_Clickイベント・ハンドラが実行される）

　なお、DefaultButton属性にボタン系コントロール以外のコントロールを指定した場合には、InvalidOperationException例外が発生するので、注意すること。

●検証エラー時にエラー項目にフォーカスをセットする

　今度は、検証コントロールで検証エラーが検出されたときに、エラー項目にフォーカスを移動させてみよう。これには、該当の検証コントロールに対してSetFocusOnErrorプロパティにTrueをセットするだけだ（デフォルトはFalse）。

　また、フォーカスが正しくセットされている様子を確認するために、もしもすでにDefaultFocus属性やSetFocus／Focusメソッドを記述している場合には、これらを削除しておこう。

　Focus.aspxを実行し、［名前］欄に何も入力しない状態で［送信］ボタンをクリックすると、以下の画面のように確かにエラー項目（［名前］欄）にフォーカスがセットされていることを確認できる。

検証エラー時にエラー項目に自動的にフォーカスをセット

●非同期通信の後にフォーカスをセットする

　最後に、非同期ポストバックを行った後に、特定の要素にフォーカスをセットする方法だ（*）。

*　本サンプルはASP.NET AJAXの機能であるので、ASP.NET 2.0環境である場合には、あらかじめ「DBプログラミング 7つのヒント − 同時実行制御からASP.NET AJAXまで −」の内容に従って、ASP.NET AJAXをインストールしておく必要がある（ASP.NET 3.5環境では不要）。

　以下のようなページが用意されているものと想定しよう。

Focus2.aspxのフォーム・レイアウト

フォーム上には以下のコントロールを配置する。

コントロール（ID） プロパティ 設定値 ScriptManager（manager） − − UpdatePanel（upanel） − − TextBox（txtName） − − Button（btnSend） Text 送信 <form> DefaultFocus txtName（*）

* DefaultFocus属性は、コード・エディタから指定する必要がある。

　まずはこの状態でFocus.aspxを実行し、［送信］ボタンをクリックしてみよう。最初のページ起動時はテキストボックスにフォーカスがセットされるが、［送信］ボタンをクリックして非同期ポストバックを実行した後は、フォーカスが外れてしまうことが確認できるはずだ。これは、先述したPage.SetFocusメソッドを利用しても同様である。

非同期ポストバックの後にはテキストボックスにフォーカスがセットされない

　非同期ポストバックでフォーカスを制御するには、ScriptManager.SetFocusメソッドを使用する必要があるのである。

protected void Page_Load(Object sender, System.EventArgs e) {   manager.SetFocus(txtName); } Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)   manager.SetFocus(txtName) End Sub

イベント・ハンドラからフォーカスを設定するコード（Focus2.aspx）（上：C#、下：VB）

　この状態でもう一度、Focus2.aspxを実行し、［送信］ボタンをクリックしよう。今度は非同期ポストバックの後もテキストボックスにフォーカスがセットされることを確認できる。

利用可能バージョン：.NET Framework 2.0 利用可能バージョン：.NET Framework 3.0 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：クライアント・スクリプト カテゴリ：Webフォーム　処理対象：ASP.NET AJAX 使用キーワード：DefaultFocus属性 使用キーワード：Page.SetFocusメソッド 使用キーワード：Focus API 関連TIPS：［ASP.NET］コントロールにフォーカスをセットするには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］コントロールにフォーカスをセットするには？ Windowsアプリのコントロールで［Tab］キーによるフォーカスを与えないようにするには？ Windowsフォームのロード時に任意のコントロールへフォーカスを設定するには？ ［Silverlight 2］ページ表示時にテキストボックスにフォーカスを設定するには？ Windowsアプリケーションで［Enter］キーによるフォーカス移動を行うには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

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