SYNCERのロゴ
アイキャッチ画像

ページを離れる時に警告する方法

ページを離れる時に警告を表示するには、{{beforeunloadイベント}}を設定します。フォームに入力内容がある場合などにだけイベントを設定してあげると、誤操作を防止できてユーザーに親切です。

サンプルコード

Windowにbeforeunloadイベントを設定する例です。昔はreturnValueの内容が警告メッセージに反映されていましたが、現在は定型文が表示されます。returnValueの内容がないと警告が表示されないのでご注意下さい。

function callbackFn ( event ) {
	event.returnValue = "入力内容が残ってますが、このページを離れても大丈夫ですか?" ;
}

window.onbeforeunload = callbackFn ;

デモ

このデモは非常に鬱陶しいので、ボタンをクリックするとイベントが設定されるようになっています。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge, div#fuga { width: 120px ; height: 90px ; line-height: 90px ; text-align: center ; font-weight: 700 ; background-color: #d36015 ; color: #fff ; }
div#fuga { margin-top: 12px ; background-color: #2660a1 ; }
</style>
</head>
<body>
<p><button id="set">設定する</button></p>
<hr>
<p><a href="https://example.com/">別のページへ移動する</a></p>
<script>
document.getElementById( "set" ).onclick = function () {
	window.onbeforeunload = function( event ) {
		event.returnValue = "このページを離れても大丈夫ですか?" ;
	}
}
</script>
</body>
</html>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。