Webノウハウ

jQueryを使って、EnterキーでTab移動する

2017年5月31日(staff)

はじめに

システム開発の際、GUIの要件の1つに、「入力項目は、Enterキーで確定し、次の入力項目に移動すること」を挙げている事が、経験として結構あります。Webシステムにおいても、例外では無くて、以前からあった方法として、Javascriptのコーディングで
event.keyCodeプロパティを、強制的にEnterキー(13)からTabキー(9)に入れ替えてしまう方法があります。

但し、InternetExpoler Ver.9以降は、event.keyCodeプロパティの強制的な変更が出来なくなっており、 (セキュリティ対策と思われる)この方法は使えません。

そこで、どうしたものか?Google先生に聞いてみると、どうやらjQueryを使うと出来るらしいという事で、次のサイト「[jQuery] Enterキーでフォーカスを移動するには」を、参考にさせていただきまして、自分用にカスタマイズした関数「fEnterChangeTab()」を紹介します。

1.関数の仕様
・input要素の中で、button型、hidden型、readonly属性、disabled属性は、タブ移動先から除外する事。
・画面最後のinput要素でEnterキーを押されたら、最初のinput要素に移動する事。
・画面最初のinput要素でEnterキー+Shiftキーを押されたら、最後のinput要素に移動する事。

2.javascriptコーディング例

[説明]
① jQueryの取り込み
(パス)は適宜、環境に置き換えて下さい。jQueryはなるべく最新を取り込んだ方が良いと思います。
②input要素の選択。但し、ボタンとhidden型は除く。
jQueryのセレクタを使って、対象とするinput要素の項目だけを選択します。
また、今回は、<div></div>で囲まれた範囲(#Div要素のidを指定)のinput要素を対象としています。

③止まってはいけいない属性
readonly属性、disabled属性のinput項目は、この条件で判断して除外します。

④onloadのタイミングでこの関数を実行
画面要素が取り込まれたタイミングで、対象とするinput要素に適用させます。
因みに、クロスブラウザ対応のコーディング例。

 

3.input要素が動的に追加された時の対応
入力の操作で、input要素(入力項目)が動的に追加されるケースがある場合、
追加されたタイミングで、この関数を呼んでkeyPressイベント関数をリビルドします。
そうすることで、追加したinput要素を適用対象と認識させます。

 

今回はこれにて、以上。

一覧表示 ▶︎ Webノウハウ, ブログ

Comments are currently closed.