Enterキーを無効にする方法

  • 76
    Like
  • 1
    Comment
More than 1 year has passed since last update.

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>

送信ボタンを書き換える

typebuttonにする。
つまり、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でキーボードのキーコードを調べる方法