以前に書いた記事「Enterの入力でページ・アイテムのフォーカスを移動する」にて、ページ・アイテムがチェックボックス・グループだとうまくいかない、との相談がありました。
そのため、以前に作成したAPEXアプリケーションにチェックボックス・グループを追加し、Enterによるフォーカスの移動を実装してみました。
作成したチェックボックス・グループがページに表示されています。
IDがP1_CHECKBOX_GROUPのDIV要素の属性としてtableindex="-1"が設定されているため、この要素にフォーカスが当たりません。
以下の２通りの対応方法が考えられます。
- P1_CHECKBOX_GROUPのtabindexを0に変更し、フォーカスが当たるようにする。
- 子要素のチェックボックスにフォーカスを当てる。
最初の方法の実装です。
ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に、以下のJavaScriptを記述します。
ページ・ロード時に実行に以下を記述し、P1_CHECKBOX_GROUPのtabindexを0に変更します。
document.getElementById("P1_CHECKBOX_GROUP").setAttribute("tabindex",0);
以上で、チェックボックス・グループにフォーカスが当たるようになります。
チェックボックス・グループに含まれるチェックボックスの数に依存するとは思いますが、これじゃない感はあります。
チェックボックス・グループに含まれる、それぞれのチェックボックスにフォーカスを移動するJavaScriptのコードは以下のように記述します。ページ・ロード時に実行のコードは消去します。
上記のJavaScriptコードをコード・エディタで記述していると、チェックボックスのIDであるP1_CHECKBOX_GROUP_0およびP1_CHECKBOX_GROUP_1について、アイテムP1_CHECKBOX_GROUP_0は存在しません。といった警告が表示されます。これらのIDはAPEXのアイテムではないため、この警告は無視できます。
この実装では、以下のようにチェックボックそれぞれにフォーカスが動作します。
２番目の実装をしたAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/on-enter-move-focus-with-checkbox.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
