初心者向け！フォームの離脱防止アラートをHTMLとJavaScriptで簡単に実装する方法

ウェブフォームを使用する際、特に長いフォームではユーザーが誤ってページを離れてしまうことがよくあります。これにより、せっかく入力した内容が失われ、ユーザーにとっては大きなストレスとなります。
これを防ぐために有効な手法が、離脱防止アラートの実装です。
このアラートにより、ユーザーがページを離れる前に警告メッセージを表示し、離脱を防止することができます。

今回は、HTMLとJavaScriptを使用して離脱防止アラートを簡単に実装する方法を解説します。

離脱防止アラートとは？

離脱防止アラートは、ユーザーがブラウザのタブを閉じたり、別のページに移動しようとした時に、確認メッセージを表示するための仕組みです。
このメッセージにより、ユーザーが誤ってページを離れ、入力内容が失われるのを防ぎます。

具体的には、JavaScriptのbeforeunloadイベントを使って、ページを離れようとするタイミングでアラートを表示することができます。

実際の実装例

では、具体的にコードを見ていきましょう。

■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>
  <h1>お問い合わせフォーム</h1>
  <form id="myForm" action="/submit" method="POST">
    <label for="name">お名前:</label><br>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">メールアドレス:</label><br>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="送信" id="submitBtn">
  </form>
</body>
</html>

このフォームはとてもシンプルですが、次に説明するJavaScriptコードを加えることで、離脱防止アラートが実装されます。

■離脱防止アラートの追加
次に、beforeunloadイベントを使って、ユーザーがページを離れようとした時にアラートを表示する仕組みを追加します。
さらに、送信ボタンが押された場合には、アラートが表示されないようにするための修正も加えます。

<script>
  let isFormDirty = false;
  let isSubmitting = false;

  // フォームに変更があった場合、フラグを立てる
  document.getElementById('myForm').addEventListener('input', function() {
    isFormDirty = true;
  });

  // 送信ボタンが押されたときはアラートを無効にする
  document.getElementById('myForm').addEventListener('submit', function() {
    isSubmitting = true;
  });

  // ページを離れようとしたときにアラートを表示
  window.addEventListener('beforeunload', function(e) {
    if (isFormDirty && !isSubmitting) {
      e.preventDefault();
      e.returnValue = ''; // これは標準で必要な記述
    }
  });
</script>

■実装の詳細と注意点

フォームに入力がある場合のみアラートを表示
フォームに何も入力されていない場合、ページを離れる際にアラートを表示しないように工夫しています。
これにより、ユーザーが無駄に警告メッセージに煩わされることを防ぎます。

送信時にアラートが表示されないようにする
ユーザーが送信ボタンを押した場合、beforeunloadイベントが発火しないように設定しています。
これにより、フォーム送信時に不要なアラートが表示されるのを防ぎます。

応用とカスタマイズ

この基本的な実装を理解したら、さらに応用してみることも可能です。
例えば、特定のフィールドのみ編集された場合にアラートを表示したり、フォームの入力が完了していない場合にのみ警告を表示するようにすることができます。

■条件付きでアラートを表示
以下のように、フォームの特定のフィールド（例: 名前またはメールアドレス）が入力された場合にのみ、アラートを表示することができます。

document.getElementById('myForm').addEventListener('input', function() {
  if (document.getElementById('name').value !== '' || document.getElementById('email').value !== '') {
    isFormDirty = true;
  }
});

このコードでは、名前またはメールアドレスのどちらかが入力された場合にのみisFormDirtyがtrueに設定されるため、より精密にアラートを管理することができます。