フォームの活用・装飾 (HTML,CSS,JavaScript)

更新日:2008年09月03日

Enterキーで送信されてしまうのを防ぐ

フォームの『1行入力欄』内にカーソルがあるときに[Enter]キーを押すと、フォーム内容が送信されてしまうことがあります。入力途中で誤送信されるのを防ぐため、[Enter]キーでは送信されないようにしてみましょう。

Enterキーでフォームの内容が送信されてしまう

フォームの「1行入力欄」内にカーソルが入っている状態(=フォーカスがある状態)でキーボードの[Enter]キーを押すと、ブラウザによってはフォームの内容が送信されてしまいます。(=[Enter]キーが、フォームの「送信ボタン」と同じように扱われます)
この機能が便利な場面もありますが、まだ入力すべき項目が残っている場合に送信されてしまうのは困ります。

以下に例を掲載しています。 3つの入力項目のうちどれかをクリックしてカーソルを入れ、[Enter]キーを押してみてください。文字は入力してもしなくても構いません。 下部の「送信する!」ボタンをクリックしなくても、クリックした場合と同じようにフォームの入力内容が送信されます。
※すべてのブラウザで送信されるとは限りません。少なくとも、IE6・7、Firefox2・3、Opera9、Safari3ではそうなります。




/gm/gc/23972/3/

上記のように「送信ボタン」を配置した場合は、IE・Firefox・Opera・Safariのどれもが(入力欄にカーソルが入っている状態で)[Enter]キーを押下するだけで内容を送信します。 (※「送信ボタン」を配置しなかった場合は、IE・Firefoxは無反応ですが、Opera・Sarariは送信します。)

上記の例では、入力欄が1つで「送信ボタン」はありません。しかし、(入力欄にカーソルが入っている状態で)[Enter]キーを押下すると内容が送信されます。 (※このように『入力欄の数が1つだけの場合』は、送信ボタンの有無に関係なくIE・Firefoxでも[Enter]キーで送信されます。)

※なお、ここでの「送信ボタン」とは、input要素のtype属性に値「submit」を指定して作ったボタン(<input type="submit">)のことです。(詳しくは後述)

1行入力欄内での[Enter]キー押下での反応
  IE Firefox Opera Safari
送信
ボタン
なし
入力欄1つ 送信 送信 送信 送信
入力欄複数 無反応 無反応 送信 送信
送信
ボタン
あり
入力欄1つ 送信 送信 送信 送信
入力欄複数 送信 送信 送信 送信
多くの場合で、1行入力欄内で[Enter]キーを押すとフォームの内容が送信されます。※上記は、IE6・7、Firefox2・3、Opera9、Safari3の各Windows版の結果です。

入力内容が日本語の場合、漢字変換の確定のために[Enter]キーを頻繁に押す可能性があります。 このとき、勢い余って[Enter]キーを押しすぎてしまうだけで、フォームの内容が送信されてしまうことになります。 そうなると、少々不便に感じられるかもしれません。

そこで、[Enter]キーを押してもフォームの内容が送信されてしまわないようにしてみましょう。

1 2 3
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…

続きを読む

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載! さぁ、いますぐチェック!

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

マネしたくなるアイデア住宅

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?