【JavaScript】フォーム離脱時にアラートを表示する方法

ウェブフォームに入力した内容を誤って失わないようにするために、フォームから離脱したときにユーザーに警告を表示する方法があります。この記事では、JavaScriptのbeforeunloadイベントを使用して、フォーム離脱時にアラートを表示する方法について解説します。

JavaScriptを使ったフォーム離脱時のアラート表示

以下のコードを使用して、フォームから離脱したときにアラートを表示します。

window.addEventListener("beforeunload", function(event) {
    event.preventDefault(); // デフォルトのアラートメッセージを無効化する
    event.returnValue = ""; // Chrome 以外のブラウザでの表示メッセージのカスタマイズに必要
    // アラートメッセージを表示する
    var confirmationMessage = "このページを離れようとしています。編集内容は失われる可能性があります。";
    (event || window.event).returnValue = confirmationMessage;
    return confirmationMessage;
});

このコードでは、beforeunload イベントを使用して、ページを離脱する際にアラートを表示します。ユーザーがフォームから離れようとすると、ブラウザがデフォルトのアラートダイアログを表示し、ユーザーに警告します。

ただし、この方法はブラウザの仕様に依存するため、動作が一貫しないことがあります。また、過剰な警告がユーザーエクスペリエンスを悪化させる可能性があるため、慎重に使用する必要があります。

まとめ

JavaScriptのbeforeunloadイベントを使用することで、フォームから離脱した際にユーザーに警告を表示することができます。
ただし、適切に使用することが重要であり、ユーザーエクスペリエンスを考慮して慎重に実装することをお勧めします。