1. Web入力フォームでもEnterキーでフォーカス移動
従来、Webの入力フォームでは、コントロールのフォーカス移動はTabキーで行うのが普通でした。しかし、最近ではイントラの業務システムにWebアプリケーションが採用されたりユーザー登録が必要なWebコンテンツが増えたりしているせいか、WebフォームにおいてもEnterキーや矢印キーなどでフォーカス移動させたいというニーズがあるようです。
Webアプリケーションでフォーカス移動を制御するには、JavaScriptで独自に実装しなければなりませんが、工数が増えるうえテストも必要です。InputMan for ASP.NETでは各コントロールに備わっているプロパティでの設定や、任意のキーに動作を割り当てるショートカット機能を利用してフォーカス移動を制御できます。
このページでは、過去に行ったキャンペーンの申し込みフォームをサンプルとして、InputMan for ASP.NET 3.0Jでのフォーカス移動の実現方法を解説します。
2. InputManでフォーカスを制御する2つの方法
InputMan for ASP.NETの入力系コントロール（テキスト、マスク、コンボ、数値、日付）でフォーカス移動を設定する方法は2つあります。1つはコントロールに備わっているプロパティで制御する方法。もう１つは任意のキーに動作を割り当てるショートカット機能を利用する方法です。
どちらのフォーカス移動も、サンプルの入力フォームに実装しています。
サンプルフォーム画面
まずは実際に、フォーム上で動作を試してみてください。
サンプルフォーム画面
サンプルフォームの各項目にある入力コントロールには以下のフォーカス移動を実装しています。
| 項目 | フォーカス移動キー | 動作 | 実装方法 |
|---|---|---|---|
| 氏名、ふりがな 企業・法人名、 所属部署など |
右矢印キー | 次のコントロールに進む | プロパティ制御 |
| 左矢印キー | 前のコントロールに戻る | ||
| Enterキー | 次のコントロールに進む | ショートカット機能 | |
| Shift+Enterキー | 前のコントロールに戻る | ||
| 電話番号、郵便番号 | 自動フォーカス移動 | 既定文字数が入力されると、 自動的に次のコントロールに進む | プロパティ制御 |
3. 実装方法
これらの実装はとても簡単でデザイン画面でのプロパティ設定や、専用エディタでの単純な操作で実現できます。では個別に設定方法を説明します。
プロパティ制御でのフォーカス移動
1. 左右矢印キーでフォーカス移動
左右矢印キーによるフォーカスの移動は、各コントロールのExitOnLeftRightKeyプロパティを使用して設定します。このプロパティは、GrapeCity.Web.Input.Core.ExitOnLeftRightKey列挙体を参照し、設定可能な値は以下のとおりです。
| プロパティ名 | 説明 |
|---|---|
| GrapeCity.Web.Input.Core.ExitOnLeftRightKey.None | 矢印キーを使用してのフォーカス移動を行わない |
| GrapeCity.Web.Input.Core.ExitOnLeftRightKey.Left | カレットが入力中の左端にあるときに←（左矢印キー）を押すと１つ前のコントロールに移動します |
| GrapeCity.Web.Input.Core.ExitOnLeftRightKey.Right | カレットが入力中の右端にあるときに→（右矢印キー）を押すと次のコントロールに移動します |
| GrapeCity.Web.Input.Core.ExitOnLeftRightKey.Both | 「Left」と「Right」の両方の機能を使用します |
上記はプロパティページから設定することもできます。［全般］の［動作］ペインにあるコンボボックスから各プロパティを選択してください。
氏名（漢字）（テキストコントロール）のプロパティページ
2. 自動フォーカス移動
サンプル画面にある「電話番号」や「郵便番号」にはそれぞれ書式を設定しており、入力した文字数が既定の書式を満たすと自動的に次のコントロールにフォーカスを移動するよう実装しています。
この機能はテキスト、マスク、コンボ、日付コントロールが備えている「ExitOnLastCharプロパティ」をTrueにすることで実現できます。設定された最大文字数や書式の入力が完了すると、次のコントロールに自動的に移動します。このプロパティもプロパティページから簡単に設定できます。
プロパティページで設定する場合は、［全般］にある［入力終了時に次のコントロールへ移動する］のチェックボックスにチェックを入れてください。
電話番号（マスクコントロール）のプロパティページ
「早期割ビキ」キャンペーンの申し込み入力フォームではSkinファイルを利用して左右矢印キーの設定と入力完了後の自動フォーカス移動の設定を行っています。ページ上にコントロールが多数ある場合はSkinファイルでページテーマを設定しておくと便利です。
*.skinの例
<%@ Register assembly="GrapeCity.Web.Input.v30, Version=3.0.2009.511,
Culture=neutral,
PublicKeyToken=c3bd7c1dccef5128"
Namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register Assembly="GrapeCity.Web.Input.v30, Version=3.0.2009.511,
Culture=neutral,
PublicKeyToken=c3bd7c1dccef5128"
Namespace="GrapeCity.Web.Input.IMMask" TagPrefix="im_mask" %>
<%@ Register Assembly="GrapeCity.Web.Input.v30, Version=3.0.2009.511,
Culture=neutral,
PublicKeyToken=c3bd7c1dccef5128"
Namespace="GrapeCity.Web.Input.IMDate" TagPrefix="im_date" %>
<im_edit:Edit runat="server" ExitOnLastChar="True" ExitOnLeftRightKey="Both">
</im_edit:Edit>
<im_mask:Mask runat="server" ExitOnLastChar="True" ExitOnLeftRightKey="Both">
</im_mask:Mask>
<im_date:Date runat="server" ExitOnLastChar="True" ExitOnLeftRightKey="Both">
</im_date:Date>
Tips! サンプルフォームにはこんな機能が実装されている ～その1～
入力文字を自動変換して不正入力を防ぐテキスト、マスク、コンボコントロールのAutoConvertプロパティをTrueに設定すると、Formatプロパティの設定内容に基づいて、変換可能な文字を自動的に変換します。
デフォルト値はTrueです。この機能を利用すると、文字変換の手間が省けるだけではなく、不正な入力を防ぐことも可能です。「早期割ビキ」キャンペーンの入力フォームでは、［ふりがな］、［電話番号］、［郵便番号］にこの機能を使用しています。［ふりがな］では、［氏名］の入力値から取得されるふりがなを、ひらがなに変換します。[電話番号]、[郵便番号]では、全角数字を半角数字に自動変換します。
ショートカット機能を利用したフォーカス制御
Enterキーでのフォーカス制御を実装するには、「ショートカットエクステンダ」を使用します。ショートカットエクステンダは、任意の動作を任意のキーに割り当てることができるコンポーネントです。デザイン画面でInputMan for ASP.NETのコントロールをページに追加すると、自動的にショートカットエクステンダも追加され、フォーム上のコントロールにショートカット機能を実装できるようになります。もちろんVisual Studioの標準コントロールにも適用できます。ショートカットエクステンダが追加されると、コントロールのプロパティウィンドウに、「Shortcut1のShortcuts」というプロパティが表示されます。
ショートカットエクステンダにより、Edit１に追加されたプロパティ（コレクション）
Shortcut1のShortcutsプロパティにある
ボタンをクリックすると、「ショートカットキーの編集」エディタが起動します。
ショートカットキーの編集エディタ
［ショートカットキー］ペインからキーを選択し、［動作：］から割り当てる動作を選択します。
追加ボタンを押すとコントロールにショートカットキーが割り当てられ、左側の表に追加したキーとコマンドが表示されます。
下記は、Enter（Return）キーを次のコントロールに移動する動作（NextControl）に割り当てる例です。
Enter（Return）キーで次のコントロールに移動する場合の設定画面
Tips! サンプルフォームにはこんな機能が実装されている ～その2～
日付の選択が不要なときは年-月カレンダーで日付コントロールのドロップダウンカレンダーやカレンダーコントロールでは、日付を表示、あるいは選択することを主な目的としています。3.0Jでは日付だけではなく「月」を表示、選択することができるようになりました。欲しい情報が年月であり、ユーザーに日付を選択してもらう必要がない場合などに、便利な機能です。「早期割ビキ」キャンペーンの入力フォームでの［購入予定年月］で実装しています。
ドロップダウンボタンをクリックすると、ドロップダウンカレンダーには年-月カレンダーが表示されます。この実装はCalendarTypeプロパティをGrapeCity.Web.Input.IMCalendar.CalendarType.YearMonthに設定するだけです。また、ShowZoomButtonプロパティをTrueにすると、カレンダーのナビゲーション部分に月-日カレンダーと年-月カレンダーを切り替えるズームボタンが表示されます。
4. まとめ
皆さんお気づきのようにInputMan for ASP.NETでのフォーカス移動制御はコーディングの必要がありません。また、フォーカス移動だけでなく、ユーザビリティの高いWebフォームを構築するための機能を豊富に備えており、その多くがプロパティ設定だけで実現できます。開発生産性、そしてユーザビリティの向上にぜひInputManをお役立てください。
トライアル版
InputMan for ASP.NET 3.0Jの機能を評価できます。こちらからお申し込みください。