ページを離れる時に警告する方法
ページを離れる時に警告を表示するには、{{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>
関連記事
- オブジェクトが空か確認する方法
- オブジェクトの中身が空か否かを確認する方法を説明します。for...in文を利用するのがお手軽です。
- UNIXタイムスタンプを取得する方法
- JavaScriptでPHPのtime()、strtotime()と同じようにUNIX TIMESTAMPを取得します。
- ページのURLを取得する方法
- ページのURLを取得するには、locationオブジェクトの各プロパティを参照します。
- 何番目の要素か確認する方法
- 要素が何番目にあるのかを確認するには、配列系メソッドのindexOf()を利用しましょう。
- Firefoxでドラッグ操作中にプレビューが表示されない場合の対処法
- Firefoxで、ドラッグ操作中にゴーストプレビューが表示されない時は、ダミーの転送データを作ってあげましょう。
- 確認ダイアログを表示する方法
- 確認ダイアログを表示して、ユーザーが選択した「はい」、または「いいえ」で処理を振り分けます。