Enterキーを押すと、フォームが送信されることがある。
キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。
しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。
この挙動は、HTMLの仕様がそうなっているからである。
※ 古いブラウザでは以下の内容で対処できない場合があります。
※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。
対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき)
テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。
<form name="testform1" action="test1.html">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="submit" value="送信" />
</form>
または
<form name="testform2" action="test2.html">
<input type="text" name="text1" />
<input type="text" name="text2" />
<button type="submit">送信</button>
</form>
送信ボタンを書き換える
typeをbuttonにする。
つまり、submitを使わない。
これで、Enterキーを押しても送信されなくなる。
<form name="testform1" action="test1.html">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="button" onclick="submit();" value="送信" />
</form>
<form name="testform2" action="test2.html">
<input type="text" name="text1" />
<input type="text" name="text2" />
<button type="button" onclick="submit();">送信</button>
</form>
onclickの部分をjQueryで書いてもよい。
<form name="testform3" action="test3.html">
<input type="text" name="text1" />
<input type="text" name="text2" />
<input type="button" value="送信" />
</form>
<script>
$(function(){
$('input[type=button]').click(function(){
$('form').submit();
});
});
</script>
対処方法② ダミーのテキストフィールドを用意する(テキストフィールドなどが1つのとき)
それでもEnterキーで送信されるときがある。
それは、テキストフィールドなどが1つしかないとき、①の対処をしても送信されてしまう。
<form name="testform1" action="test1.html">
<input type="text" name="text1" />
<input type="button" onclick="submit();" value="送信" />
</form>
ダミーのテキストフィールドを用意する
display:none;などを使い、テキストフィールドを2つ以上にする。
<form name="testform1" action="test1.html">
<input type="text" name="text1" />
<input type="text" name="dummy" style="display:none;">
<input type="button" onclick="submit();" value="送信" />
</form>
対処方法③ jsでEnterキーを無効化する
①と②はhtmlだけで制御ができるが、jsで制御することもできる。
<form name="testform1" action="test1.html">
<input type="text" name="text1" />
<input type="button" value="送信" />
</form>
<script>
$(function(){
$("input"). keydown(function(e) {
if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
return false;
} else {
return true;
}
});
});
</script>
または
<form name="testform4" action="test4.html">
<input type="text" name="text1" />
<input type="button" value="送信" />
</form>
<script>
$(function(){
$("input").on("keydown", function(e) {
if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
return false;
} else {
return true;
}
});
});
</script>
おまけ
ここで出てくる13というのは、EnterキーのkeyCodeの番号です。
このサイトで各キーのKeyCodeが確認できます。jQueryでキーボードのキーコードを調べる方法