Webアプリケーションでのキーボード制御系Tips

通常のWebアプリケーションだとあまりニーズはありませんが、業務系Webアプリケーション、特に旧来のホスト系やC/S(クライアント/サーバー)系システムからWebアプリへの移行だと(あるいはそういったシステムを使いなれた人達からのリクエストでは)レガシーなキーボード制御を要求される場合があります。GeneXusでの対応可・不可も含めて紹介します。

1.Enterキーでフォーカス移動したい

HTMLの標準ではEnterキーはFormのSubmitつまりサーバーへのデータ送信です。しかし、ホスト・C/S系だと(特にテンキーを使って操作する場合は)Enterキーでフォーカス移動が主流です。
GeneXusにはジェネレーターのプロパティに「Field exit」プロパティがあり、以下が選択できます。

1-1.Tab, Shift-Tab

• フォーカスの移動はTABキー(次の項目へ)、TAB+SHIFTキー(前の項目へ)です。(ディフォルト設定)
• EnterキーはEnterイベントのトリガーになります。

1-2.Enter, Tab, Shift-Tab

• フォーカスの移動はTABキー、TAB+SHIFTキーに加えてEnterキーでの遷移が可能です。
• 文字列型(Char/VarChar/LongVarChar)で入力項目の行数を2行以上に設定した場合、HTMLのTextAreaタグが生成されますが、TextArea内で改行を入力したい場合はコントロールキー(CTL)+Enterキーを押します。
• EnterキーではEnterイベントはトリガーされません。Enterイベントが割り当てられているボタンまでフォーカス移動後、EnterキーかSpaceキーの押下でEnterイベントがトリガーされます。

1-3.Passing last char

• 入力した文字数が項目属性/変数に設定された桁数になると、自動的に次の項目へフォーカス移動します。
• 満たない場合でもTABキー、TAB+Shiftキーにより次、前にフォーカス移動できます。

2.ファンクションキーに操作を割り当てたい

ボタンに割り当てたイベントコードに数字を指定する事により(ユーザーイベント名の後ろに空白をあけて数字指定)、ファンクションキーの割り当てが可能です。(F1 〜 F24)
割り当てた数字nがFnキーに相当します。
但し、ブラウザ標準のファンクションキーは使えなくなります。(例えば、F5でページのリロード)

3.フォーカス遷移順をカスタマイズしたい

GeneXusではHTMLでのtab index/access keyの指定はできません。
tab indexが指定されていない場合、HTML標準のフォーカス遷移順は入力項目(INPUTタグ)の出現順序で、テーブルタグがある場合は、セルの横方方向(TD→TD)で、行末から次の行へという遷移になります。

テーブル内のフォーカス遷移

従ってこのHTMLの仕様を前提にしたカスタマイズが一般的になります。
例えば、複数列あるテーブルコントロール(タグ)で縦方向にフォーカス移動したい場合(標準は横移動)はテーブルコントロールをネストし、外側のテーブルセルが列定義、内側のテーブルセルが行定義とします。

テーブルを入れ子にする事により遷移順をカスタマイズ

4.エスケープキーに操作を割り当てたい

GeneXusではエスケープキー(ESC)には操作は割り当てできません。
エスケープキーの標準的に動きとしては以下の通りです。

• 入力画面　→　入力値のリセット(IEのみ)
• Prompt/Popup画面　→　Prompt/Popup画面のクローズ