【JavaScript】フォームのエンターキーを押した際の送信を無効化する方法

フォームを利用する際、エンターキーを押して意図せず送信されてしまうことがあります。これを防ぐために、JavaScriptを使ってエンターキーのデフォルト動作を無効化する方法をご紹介します。

スポンサーリンク

基本のHTML構造

まず、基本的なHTMLフォームを用意します。以下のコードは、シンプルな入力フィールドと送信ボタンを持つフォームです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォーム送信の無効化</title>
</head>
<body>
    <form id="myForm">
        <label for="inputField">入力:</label>
        <input type="text" id="inputField" name="inputField">
        <button type="submit">送信</button>
    </form>
</body>
</html>

JavaScriptでエンターキーを無効化

次に、エンターキーが押されたときにフォームの送信を防ぐJavaScriptを追加します。以下のスクリプトをHTMLファイルに追加してください。

<script>
    document.getElementById("myForm").addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            event.preventDefault(); // デフォルトの送信動作を無効化
        }
    });
</script>

完成したコード

上記のHTML構造とJavaScriptを組み合わせると、次のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォーム送信の無効化</title>
</head>
<body>
    <form id="myForm">
        <label for="inputField">入力:</label>
        <input type="text" id="inputField" name="inputField">
        <button type="submit">送信</button>
    </form>

    <script>
        document.getElementById("myForm").addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                event.preventDefault(); // デフォルトの送信動作を無効化
            }
        });
    </script>
</body>
</html>

解説

フォームの取得: document.getElementById(“myForm”).addEventListener(“keypress”, function(event) {
フォーム全体に対してkeypressイベントリスナーを追加しています。

エンターキーの検出: if (event.key === “Enter”) {
イベントオブジェクトのkeyプロパティを使って、押されたキーがエンターキー（Enter）かどうかをチェックします。

デフォルト動作の無効化: event.preventDefault();
event.preventDefault()メソッドを呼び出して、エンターキーが押されたときのデフォルトの動作（フォーム送信）を無効にします。

よくある質問（FAQ）

Q. JavaScriptでEnterキーによるフォーム送信を無効にするには？
A. フォームのkeydownイベントでevent.key === “Enter”かつevent.target.tagName !== “TEXTAREA”の場合にevent.preventDefault()を呼びます。textareaでは改行が必要なため除外してください。
Q. 特定の入力フィールドでのみEnterを無効にするには？
A. 対象のinput要素のkeydownイベントを監視し、Enterキー時にpreventDefault()します。フォーム全体ではなく特定フィールドのみ制御できるため、textareaなど他の要素に影響しません。
Q. Enterで次のフィールドにフォーカスを移動するには？
A. keydownイベントでEnterキー時に次のフォーム要素を取得してfocus()を呼びます。querySelectorAll(“input, select, textarea”)で順序を取得し、currentIndex + 1の要素にフォーカスを移せます。

まとめ

これで、エンターキーを押してもフォームが送信されないようになります。他のキーやボタンによる送信は通常通り行われます。フォームの送信動作を制御することで、ユーザーエクスペリエンスを向上させることができます。