フォームから離脱時にプロンプトを表示

appare45 commented 5 months ago

SOS「破棄してもいいですか？」

WhatACotton commented 5 months ago

調べてみたところ、beforeunloadを読んでダイアログを出すことはできるが、メッセージを指定して確認ダイアログを出すのはしぶそう(deprecatedになっているっぽい？) https://developer.mozilla.org/ja/docs/Web/API/Event/returnValue

これで実装していくのがベストエフォートかも https://zenn.dev/qaynam/articles/c4794537a163d2

WhatACotton commented 5 months ago

色々調べてみたけどしぶそう

oka4shi commented 4 months ago

beforeunloadでユーザーのページ離脱を防ぐ | CXRエンジニアリング株式会社｜CRYPTO and REAL ASSE

前にこの方法と似たような感じで実装したことがあります。これで良さそう

記事にもあるように、event.returnValueはdeprecatedになってはいますが、Chromeの場合この方法を使うしかないみたいです。ちなみに、event.returnValueでメッセージを指定する機能は削除されていますが、空の文字列を渡すことでブラウザのデフォルトのダイアログ(「行った変更が保存されない可能性があります」みたいなの)を表示することは今でもできます

わたくんが調べてくれた https://zenn.dev/qaynam/articles/c4794537a163d2 の方法も組み合わせ、router.events.on('routeChangeStart')でも発火するようにするのが良さそう

oka4shi commented 4 months ago

router.eventsはApp Routerでは使えないらしい Next.js App Router でのフォーム離脱防止

oka4shi commented 4 months ago

App Routerだとrouter.eventsが使えないので「戻る」が押されたときのハンドルが渋いリロードとタブを閉じるのを防ぐのは別に不可能そうではなく、普通に実装もできた

調べた限りでは、現状App Routerで戻るを押したときにフォームの内容を維持するにはlocalStorageに内容を保存して復元する機能を作るしかなさそう

sohosai / sos24-client

フォームから離脱時にプロンプトを表示 #127