Enterの入力でページ・アイテムのフォーカスを移動する

 キーボードのEnterを入力した時点で、次のページ・アイテムにフォーカスを移動する方法を考えてみました。

上記では、ページ・アイテムとして上から、テキスト・フィールド、選択リスト、ポップアップLOV、日付ピッカーが並んでいます。Enterを入力すると、次のページ・アイテムにフォーカスを移動します。

それぞれのページ・アイテムに、ほぼ同様の動的アクションを作成しています。

タイミングのイベントとして、キー・ダウン、選択タイプはアイテム、アイテムとして自分自身を指定します。（ページ・アイテムP1_TEXTの動的アクションのタイミングのアイテムはP1_TEXTにします。）

イベントとしてはキー・プレスも取れますが、ポップアップLOVではEnterのキー・プレスのイベントを取ることができませんでした。キー・ダウンを取る必要があります。

クライアント側の条件としてJavaScript式を選択し、JavaScript式に以下を記述します。Enterが入力されたときに限り、TRUEアクションが実行されます。

this.browserEvent.originalEvent.key == "Enter"

TRUEアクションとしてフォーカスの設定を選び、影響を受ける要素の選択タイプをアイテム、アイテムとしてフォーカスの移動先のアイテムを選択します。

ページ・アイテムP1_TEXTでEnterを押された場合は、フォーカスをページ・アイテムP1_LISTに移動するので、ここではP1_LISTを指定します。

初期化時に実行は必ずOFFにします。

実際に受け取ったイベントを確認するために、以下のJavaScriptを実行してメッセージを表示しています。

apex.message.showPageSuccess(

    this.browserEvent.originalEvent.key +

    " on " +

    this.triggeringElement.id

);

ページ・アイテムP1_LISTから、ページ・アイテムP1_LOVへフォーカスを移動しています。

ページ・アイテムP1_LOVから、ページ・アイテムP1_DATEへフォーカスを移動しています。

ページ・アイテムP1_DATEから、ページ・アイテムP1_TEXTへフォーカスを移動しています。

以上で、最初のGIF動画のような動作になります。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/on-enter-move-focus.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

追記

それぞれ動的アクションを設定すると見通しが悪いという場合は、ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述することで同じ動作になります。

// P1_TEXT to P1_LIST
document.getElementById("P1_TEXT").onkeydown = function(event) {
    if (event.key == "Enter") {
            apex.items.P1_LIST.setFocus();
    }
};
// P1_LIST to P1_LOV
document.getElementById("P1_LIST").onkeydown = function(event) {
    if (event.key == "Enter") {
            apex.items.P1_LOV.setFocus();
    }
};
// P1_LOV to P1_DATE
document.getElementById("P1_LOV").onkeydown = function(event) {
    if (event.key == "Enter") {
            apex.items.P1_DATE.setFocus();
    }
};
// P1_DATE to P1_TEXT
document.getElementById("P1_DATE").onkeydown = function(event) {
    if (event.key == "Enter") {
            apex.items.P1_TEXT.setFocus();
    }
};

完