gwt - Enter を押して GWT / GXT コンポーネントをナビゲートする

Question

TAB キーによってネイティブに実装されているのと同じ方法で Enter キーを押して、Dialog コンポーネントをナビゲートする方法があるかどうかを知りたいですか?

Answer 1

keyDown および keyUp イベントを処理して試したことはありませんが、確かに実行可能のようです。ただし、この方法でブラウザが生成したダイアログ ボックスや、Window.alert() を使用して作成された他のダイアログをインターセプトできない場合があります。ダイアログはどのように作成していますか?

Answer 2

タブ キーは、フォーカスを変更する作業を行うブラウザーです。特別なことを追加する必要はありません。インターネット上のどのフォームでもタブが機能することがわかります (何らかの理由で明示的に無効にされている場合を除きます...)。

Enter キーでフォーカスを移動するには、onkeydown イベントをリッスンし (タブによるフォーカスの変更も onkeydown で発生するため、一貫性を保つためにこれを選択します)、それが Enter キーであったかどうかを確認し、そうであれば、次の要素にフォーカスを移動する必要があります。リスト。

典型的なタブ フォーカスの動作には、ブラウザーがページ上の要素の tabIndex をチェックし、ページ上の次の要素 (より高い tabIndex、または最も近い後続の兄弟/いとこ要素) を見つけることが含まれます。これを簡単に実装する方法はありません。代わりに、次のウィジェットに移動することに集中します。

GXT 3 の FormPanelHelper には、すべてのフィールドを検索する便利なメソッドがいくつかあります。このコードは、GXT 以外のフィールドの基礎としても使用できます。ダイアログで見つかったフィールドからすべての FocusEvent と BlurEvent を追跡し、それを使用して現在フォーカスされているフィールドを常に追跡します。ダイアログ自体にキー ハンドラーを追加して、すべてのキー イベントをキャプチャし、1 つが Enter キーかどうかを確認します。もしそうなら、現在フォーカスされているフィールドから次のフィールドが何であるかを把握し、それに対して .focus() を呼び出します。これにより、上記のフォーカス ハンドラーがトリガーされるため、簿記が正しく更新されます。

@eliran-m が指摘したように、タブ キーをそのままにしておくことを検討してください。ユーザーが慣れ親しんだ方法でナビゲートするのを邪魔しないでください。新しい機能を追加することは良いことかもしれませんが、期待される動作を取り除くことはおそらくそうではありません。