JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】フォームの未保存変更があるときにアラートを表示する方法

Webアプリケーションでは、フォームに入力中のデータが未保存のまま、ユーザーがページを離れてしまうと入力内容が失われてしまいます。こうした事態を防ぐために、JavaScriptでは onbeforeunload イベントを利用することで、ページを離れる直前に警告アラート（確認ダイアログ）を表示できます。

以下は、フォームに未保存の変更がある場合にアラートを表示するサンプルコードです。

実装例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    input {
        margin: 10px;
    }
</style>
</head>
<body onbeforeunload="return pageUnload()">
<h1>Alert for unsaved changes in form</h1>
<form>
Username <input type="text" />
<br />
Password <input type="password" /><br />
<button type="submit">SUBMIT</button>
</form>
<br />
<script>
    function pageUnload() {
        return "The data on this page will be lost if you leave";
    }
</script>
</body>
</html>

コードの解説

  • onbeforeunload属性：<body>タグに指定することで、ページがアンロードされる（再読み込み・閉じる・別ページへの移動など）直前に関数 pageUnload() が呼び出されます。
  • pageUnload()関数：文字列を返すことで、ブラウザ標準の確認ダイアログが表示され、ユーザーは「このページを離れる」か「キャンセル」を選択できます。

出力結果

上記のコードを実行すると、ユーザー名とパスワードの入力欄を持つシンプルなフォームが表示されます。

【JavaScript】フォームの未保存変更があるときにアラートを表示する方法

何か入力した状態で再読み込みボタンをクリックすると、次のような警告ダイアログが表示されます。

【JavaScript】フォームの未保存変更があるときにアラートを表示する方法

注意点

近年のモダンブラウザでは、セキュリティ上の理由から、ダイアログに表示されるメッセージはカスタム文字列ではなくブラウザ側の固定メッセージが表示される仕様になっています。また、この機能は悪用を防ぐため、ユーザーが実際にページ内で操作を行った場合のみ動作するよう制限されています。必要以上に頻繁に使うとユーザー体験を損なうため、重要な入力フォームなど、本当に離脱防止が必要な場面でのみ活用することをおすすめします。

  1. JavaScriptでテキストアラートを表示する方法｜alert()関数の使い方を解説

    JavaScriptのalert()関数とは JavaScriptのalert()関数は、ユーザーの画面上にポップアップメッセージを表示するために使用される関数です。簡単な通知や確認メッセージを伝えたい場面で活用でき、呼び出されるとユーザーが「OK」ボタンをクリックするまでスクリプトの処理が一時的に停止します。 サンプルコード 以下は、ボタンをクリックするとアラートポップアップを表示する具体的なコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

  2. ボタンクリックをトリガーに、JavaScript（jQuery）でフォーム送信時にアラートを表示する方法

    Webフォームを作成する際、「送信ボタンが押されたことをユーザーに知らせたい」という場面はよくあります。本記事では、jQueryのclick()メソッドを使って、ボタンクリックをトリガーにフォーム送信時のアラートを表示する方法を、具体的なコード例とともにわかりやすく解説します。 1. 送信ボタンのHTMLを用意する まずは、クリックイベントを設定する対象となるボタンを用意します。ここでは、id属性に「submitForm」を指定したシンプルな送信ボタンを使用します。 <button id="submitForm">Submit</button> この