Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

【HTML】【CSS】フォームでEnterを押しても送信しないようにする

こんにちは。

HTMLで少し詰まったことがあったのでメモしておきます。

テキストフォームにフォーカスがある状態でEnterを押すと、ボタンを押さなくてもフォームの内容が送信されてしまいます。
場合によっては便利ですが、この機能を無効にしたい場合もあります。

※ちなみに、この挙動はブラウザによって違うようです。
Chromeの場合はテキストフォームがひとつのときは送信されましたが、複数あると送信されませんでした。
こちらにブラウザごとの挙動がまとめられています。


テキストフォームとボタンがあるフォームの場合は、以下のようにして解決することが出来ます。

<form action="hoge">
  <input type="text" name="testa"> <input type="text" name="testb">
  <button type="button" onClick="submit();">送信</button>
</form>

input type=submit を使うのではなく、buttonタグにしてonClickでsubmit()としています。

この方法についてはググると色々なところに出ています。
ただ、自分の場合はボタンがなく、テキストフォームがひとつだけの状態のときに、この機能を無効にしたかったのです。


その方法は以下のようになります。

<form action="hoge">
  <input type="text" name="testa">
  <input type="text" name="dummy" style="position:absolute;visibility:hidden">
  <input type="button" value="hoge" onClick="submit();">
</form>

これはCSSを用いて見えないテキストフォームを作っています。
Enterを押すと送信されてしまうのは、テキストフォームがひとつの場合(少なくともChromeでは)でしたので、これで解決できました。
ちなみに、この場合はinput type=submit でもいけます。


今回は以外なところで詰まってしまいました。

以上です。
それでは。