【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 でもいけます。
今回は以外なところで詰まってしまいました。
以上です。
それでは。