フォームを利用する際、エンターキーを押して意図せず送信されてしまうことがあります。これを防ぐために、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()メソッドを呼び出して、エンターキーが押されたときのデフォルトの動作（フォーム送信）を無効にします。
まとめ
これで、エンターキーを押してもフォームが送信されないようになります。他のキーやボタンによる送信は通常通り行われます。フォームの送信動作を制御することで、ユーザーエクスペリエンスを向上させることができます。
