入力離脱時の確認ダイアログ表示

Question

NextJs 入力離脱時のダイアログ表示について

どなたか知見あれば教えていただきたいです。

現在、Nextjs(Reactフレームワーク)を使用して、TODOアプリを作成しています。

---

実現したいこと

---

入力フォームに文字を入力している状態で、

ブラウザバックボタン（Chromeの戻るボタン）を押した際に、

入力離脱ダイアログを表示させたいです。

ブラウザに標準で備わっている、「window.alert, window.confirm」などのダイアログは使用せず、

オリジナルで作ったダイアログを表示させたいです（細かいですが、そういったところにこだわりたいです）。

以下のように書くと実現はできるのですが(ネットでよくあるブラウザバック検知のやつです)、問題があります。

// 入力フォームのステート
const [inputs, setInputs] = useState<string>('');

// ダイアログの開閉ステート
const [isOpen, setIIsOpen] = useState<boolean>(false);

useEffect(() => {
  if (inputs !== ''){
    history.popstate(null,  '', location.href);
  };

  const check = (e: any) => {
    e.preventDefault();
    history.popstate(null,  '', location.href);
    setIsOpen(!isOpen);
  };
  addEventLisner('popstate', check);

  return () => {
    removeEventLisner('popstate', open);
  };
});

入力　⇨ フォームの入力データを消す　⇨ ブラウザバックボタンを押す　⇨ history.popstateで履歴を更新してしまっているためブラウザバックが効かない

入力を消すとhistoryの情報を元に戻すみたいなことをすればいけるはずですが、現状できそうにもありません

どなたかブラウザバックに詳しい方いましたら、教えていただきたいです。

また、物理的に無理であれば、ブラウザバック時の確認ダイアログで使われるような「ライブラリ」等はないでしょうか？？

ご教授いただければ幸いです。

Answer 1

以前同様の処理を実現したく調査しましたが、独自UIのポップアップを出すことは不可能のようです。（おそらく悪用を防ぐためだと思います）

独自UIに拘らないのであればbeforeunloadイベントを利用する方法があります。（ブラウザによって挙動に差異があったはずです）
https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup

---

• 入力内容をlocalStorage等に保存しておき、次回アクセス時に参照する
• （ブラウザバック後のページも同一サイトである場合に限りますが）ブラウザバック後のページで、入力途中の内容がある旨の表示を行う

などの別のアプローチを考えても良いかもです。

Comments

[1998Ttf]

やはりそうですよね。。
しぶしぶ、ブラウザ標準のものを使用しました。。
ありがとうございます！