.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のフォーム・レイアウト | |||||||||||||||||
フォーム上には以下のコントロールを配置する。 | |||||||||||||||||
|
|
||
[送信]ボタンをクリックしたときのコード(Focus.aspx)(上:C#、下:VB) |
●デフォルト・フォーカスを設定する
それでは、まずはページ・ロード時にデフォルトでフォーカスを設定する方法を見てみよう。ページ・ロード時にテキストボックスtxtNameにフォーカスをセットするには、Focus.aspxに対して、コード・エディタから以下のような記述を追加するだけだ。
|
|
デフォルト・フォーカスを設定するコード(Focus.aspx) |
DefaultFocus属性には、フォーカスを置きたいコントロールのID値をセットする。果たして、実行してみると、初期状態でテキストボックスにフォーカスがセットされているのが確認できるはずだ。次の画面は、このコードを実行したもの。
初期状態でテキストボックスにフォーカスがセットされた |
ちなみに、ここでは静的にデフォルト・フォーカスを設定しているが、次のようにコードから動的にデフォルト・フォーカスを設定することも可能である。
|
||
イベント・ハンドラからフォーカスを設定するコード(Focus.aspx)(上:C#、下:VB) |
フォーカスをセットするには、Page.SetFocusメソッド、または上のコードではコメントアウトしているが、個別のコントロールからFocusメソッドを呼び出せばよい(いずれも意味的には同じである)。先述したDefaultFocusプロパティが併せて設定されている場合も、SetFocus/Focusメソッドが呼び出された場合にはこちらの操作が優先される。
●デフォルト・ボタンを設定する
デフォルト・ボタンとは、フォーム上で[Enter]キーを押下した場合に、(該当するボタンにフォーカスが当たっていなくても)デフォルトでクリックされたものと見なされるボタンのこと。フォームを入力する場合には、キーボードだけで操作をしていることも多いが、デフォルト・ボタンを設定しておくことでいちいち該当のボタンに[Tab]キーなどでフォーカスを移さなくても、フォームを入力し終わった時点で[Enter]キーを押すことでフォームを送信でき、操作性を向上できる。
まずは、デフォルト・ボタンを設定しない場合の挙動を確認してみる。テキストボックス上にフォーカスが当たっている状態で[Enter]キーをクリックしてみよう。ページ下部の文字列は変わらず、ButtonコントロールbtnSendに関連付けられたClickイベント・ハンドラが実行されて「いない」ことが確認できる。
テキストボックス上で[Enter]キーを押下したとき(btnSend_Clickイベント・ハンドラが実行され「ない」) |
そこで次に、コード・エディタから<form>タグにDefaultButton属性を追加してみよう。
|
|
デフォルト・ボタンを設定するコード(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のフォーム・レイアウト | ||||||||||||||||||
フォーム上には以下のコントロールを配置する。 | ||||||||||||||||||
|
||||||||||||||||||
* DefaultFocus属性は、コード・エディタから指定する必要がある。 |
まずはこの状態でFocus.aspxを実行し、[送信]ボタンをクリックしてみよう。最初のページ起動時はテキストボックスにフォーカスがセットされるが、[送信]ボタンをクリックして非同期ポストバックを実行した後は、フォーカスが外れてしまうことが確認できるはずだ。これは、先述したPage.SetFocusメソッドを利用しても同様である。
非同期ポストバックの後にはテキストボックスにフォーカスがセットされない |
非同期ポストバックでフォーカスを制御するには、ScriptManager.SetFocusメソッドを使用する必要があるのである。
|
||
イベント・ハンドラからフォーカスを設定するコード(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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|