2008年03月30日

formタグで、エンターキーを押したときに送信しないようにする

formタグ内の、特にテキストフィールド(type="text")などでエンターキーを押すと、送信ボタンをクリックしたのと同じ動作になってしまいます。そのまま送信すればいい場合は便利ですが、input type="submit"ではなく、buttonタグとJavaScriptを組み合わせて事前チェックなどを行っていた場合は送信されては困る場合があります。

マチウケメール便もボタンをクリックした時はAjax処理がメインで送信はほとんど使っていません。

基本的には、formタグ内にsubmitが無ければエンターキーを押しても送信はされません。submitというのは<input type="submit">、あるいは<button type="submit"></button>です。後者のbuttonタグの場合、typeを指定しない場合のディフォルトがsubmitですので注意が必要です。自分はtypeのディフォルトはbuttonだと思ってました... submitではないbuttonタグには必ずtype="button"を書いておかないとです。

submitが無い場合でも、例えばformタグ内に<input type="text">が一つしか無い場合などはエンターキーで送信となってしまうようです。このことは下記のページに詳しいです。

Enterキーを打ってもsubmit(送信)しないようにするには
http://www.nslabs.jp/enter-submit.rhtml

従ってテキストボックスが一つしかない場合、上記ページのようにform内にダミーの<input type="text" style="position:absolute;visibility:hidden">を置いておく必要があります。

以上のようにsubmitを無くす以外に、JavaScriptでonkeydownイベントを処理してエンターキーを無効にする方法もあります。この方法だとエンターキーを押した時に送信しないようにするだけでなく、何かJavaScriptでの処理を行えるので便利です。マチウケメール便でもエンターキーでフォーカスを移動したり、送信以外のボタンをクリックした時と同じ処理を入れたりしてます。
onkeydownイベントを処理する方法はこちらのページが詳しいです。実際にはonkeydownではなく、onkeypressイベントを使うといいようです。これはonkeydownがsafariなどでうまく動作しないためだそうです。

エンターキーの押下でフォームの送信を行わないようにする
http://blog.nomadscafe.jp/archives/000484.html

ちなみに、onkeypressイベントを使うのは便利ですが、試したところFirefoxの入力補完と衝突してしまいます。途中まで入力し、候補を選んでエンターキーを押した時にその候補が入力されずにonkeypressが処理されてしまうわけです。残念ながら入力補完とonkeypressイベントを共存させる方法がわからなかったので、メールアドレスの入力など、入力補完機能があった方が便利な場所では最初の方法、submitを無くしてダミーのテキストフィールドを置く方法をとりました。

この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。