黄昏より暗きもの、血の流れより赤きもの

黄昏より暗きもの、血の流れより赤きもの

自分の好きな事を好きなように書いて行きます。

javascriptでEnterキーをTabキー代わりに使う方法をまとめてみた

フォーム入力の際、EnterキーをTabキーの変わりに利用したい事がある。例えばイベント処理のonkeydownを使って、「if(event.keyCode == 13) event.KeyCode = 9;」と入力し、EnterキーとTabキーのそれぞれに対応する番号キーコード(13と9)を入れ替えて対応しているブログが多い。

フォーム内に「text」や「password」が無いか注意

これを行う際に注意するべき点はフォームにsubmitがある場合だ。以下のブログではformに「text($this->Form->text)」や「submit($this->Form->submit)」がある場合に、Enterを押すとsubmitされてしまう旨が書かれている。

調べてみたけどTabをEnterを押すとsubmitされる条件、とか

http://studio-fun.net/2009/06/01/483/

又キーコード一覧表があると、今後の作業が楽になりそうなので掲載しておきたい。

キーコード一覧表

http://faq.creasus.net/04/0131/CharCode.html

各ブラウザのキーコード表[JavaScript]

http://www.programming-magic.com/file/20080205232140/keycode_table.html

方法1:onkeydown時にスクリプトを実行

一つ目の方法はonkeydownでスクリプトを実行する方法だ。ブラウザ毎の判別法が違うらしく、それに応じて場合分けが出来る点がすばらしい。

JavaScript】EnterでTabと同じように次の入力フォームに移動

http://se-suganuma.blogspot.jp/2010/07/javascriptentertab.html

方法2:form action OnSubmit="return false"で一旦Enterの動きを止めてしまう

2つ目方法がこのOnSubmitを使う方法だ。CakePHPのフォームヘルパーの$this->Form->submitなどどうしてもsubmitを使って、入力結果をControllerに渡す事になる。だから出来る限りフォームヘルパーを使いたい場合はこっちの方法が良いと思う。Mac OS XSafariでは実際にKeyCodeを認識していた。

WebTecNote:[JS]Enterキーでのフォーム送信を抑止&javascript実行

http://tenderfeel.xsrv.jp/javascript/267/

方法3:jQueryを用いる

この他jQueryを用いる方法もあり、場合に応じて使い分けていきたい。

jQueryでキーボードのキーコードを調べる方法

http://black-flag.net/jquery/20110630-3283.html