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

更新日:2008年09月03日

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

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

  • Check

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
  • 印刷する
  • ブックマークする
  • 携帯に送る
  • ブログに書く

あわせて読みたい

この記事の担当ガイド

写真

西村 文宏

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

続きを読む

バッグが重要なのはビジネススタイルに限ったことではない。手に取った姿を見れば明らかだが、オフの着こなしにおいても相当の存在感を主張しているはずだ。そこで今回は、大人に相応しい「トートバッグ」「ショルダーバッグ」「ボディバッグ」を選び抜いた。自分のスタイルに合う逸品を、ひとつと言わず好きなだけ見つけよう!

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

Powered by 価格.com

おすすめ記事

メルマガ登録

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

All About ウェブマガジン

男性向け

散財必至! ブツヨクバッグ×40

女性向け

絶対ほしくなる!トレンド春靴 

All About モバイル

QRコード

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

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