Help us understand the problem. What is going on with this article?

Enterキーを無効にする方法

More than 5 years have 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でキーボードのキーコードを調べる方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away