フォームとか編集中に戻るボタンを押してしまったときに、「本当に戻るか」確認する(JavaScript)

フォームを編集してたけど、保存する前送信する前に誤操作でページを遷移してしまうとせっかく入力した情報が消えてしまいかねない。「本当に戻りますか?」と尋ねるようにしてあげる方が親切である。

Chromeの場合、「このサイトを離れてもよろしいですか?行った変更が保存されない可能性があります。」が確認ダイアログの文言になるみたいですね。

スクリーンショット 2018-03-28 1.32.12.png

それを防いであげるためには、以下のコードで書いているようにwindowオブジェクトのonbeforeunloadを指定してやります。

Chromeでは、onbeforeunloadでどのような文言を返してもセキュリティを考慮してか同様の表記しか許されない。他のブラウザでは指定した文言が表示される。

onbeforeunloadに関数を指定すれば、確認ダイアログ

onbeforeunloadにnullが指定されれば、何もダイアログなし

特に難しいことないですね。。。

 

About the author

コメントを残す