2013年2月15日

[jQuery] Enterキーでフォーカスを移動するには

Enterキーでフォームを送信したくない時は


あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。

リターン(Enterキー)でフォームを送信しない方法: 小粋空間

とりあえずこの記事の「4.押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。


Enterキーで次のフィールドにフォーカスを移動するには


次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな~、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。

Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。


Shift+Enterキーにも対応するには


さらについでにShift+Enterキーでの逆順の移動にも対応させてみた。




もっとキーイベントを細かく制御するには


こんな感じで作りだすと、欲が出てきてさらにファンクションキーや矢印キーにも対応したくなってくる。でも、自分で作らなくても何かあるんじゃないかな~という気もする。

探してみたら次の様なjQueryプラグインが見つかった。
Enter/Tab項目移動とFunctionKey制御をplugin化 - せかにゃ~

これで機能的には申し分無さそうだ。ただソースコードを見ると対象のフォームがdocument.forms[0]に固定されていたりするので場合によっては少し変更する必要があるかも知れない。


キーイベントを拾って独自の関数を実行するだけならこういうのもあった。(フォーカス移動の処理は自分で書く必要があるみたいだ。)
jQuery.gpKeyでキー操作が楽々に。 | Ginpen.com



最近はWindowsアプリケーションをWebに置き換える案件も多いので、きっとこの様なプラグインは役に立つと思う。