関西大学大学院 総合情報学研究科 博士課程にて情報学を学ぶ傍ら、ホームページに関する書籍の執筆や企業…
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
フォームの活用・装飾 (HTML,CSS,JavaScript)
更新日:2008年09月03日
フォームの『1行入力欄』内にカーソルがあるときに[Enter]キーを押すと、フォーム内容が送信されてしまうことがあります。入力途中で誤送信されるのを防ぐため、[Enter]キーでは送信されないようにしてみましょう。
フォームの「1行入力欄」内にカーソルが入っている状態(=フォーカスがある状態)でキーボードの[Enter]キーを押すと、ブラウザによってはフォームの内容が送信されてしまいます。(=[Enter]キーが、フォームの「送信ボタン」と同じように扱われます)
この機能が便利な場面もありますが、まだ入力すべき項目が残っている場合に送信されてしまうのは困ります。
以下に例を掲載しています。 3つの入力項目のうちどれかをクリックしてカーソルを入れ、[Enter]キーを押してみてください。文字は入力してもしなくても構いません。 下部の「送信する!」ボタンをクリックしなくても、クリックした場合と同じようにフォームの入力内容が送信されます。
※すべてのブラウザで送信されるとは限りません。少なくとも、IE6・7、Firefox2・3、Opera9、Safari3ではそうなります。
上記のように「送信ボタン」を配置した場合は、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]キーを押してもフォームの内容が送信されてしまわないようにしてみましょう。
関連キーワード[PR]
人気ホームページ作成ランキング
Powered by 価格.com
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
関連キーワード[PR]