skillup

技術ブログ

JavaScript

途中入力離脱防止処理 JavaScript

投稿日:2017年8月24日 更新日:

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。

この場合のJavaScriptのイベントはbeforeunloadらしいですね。ちなみにブラウザの戻るボタン、閉じるボタンでも有効に動きますのでかなり使えます。

ソース

注意点

  • 文字入力や画面になんらかのアクションがないと、離脱防止は動きません。開いて何もせずに「戻る」を押してしまうと、何も起きずに離脱してしまいます。そのため入力がないページでは意味がないです。(そんなケースで使うことはあまりないかと思いますが、自分がそのケースで結構ハマりました。)
  • 表示できる文言はどうやらブラウザによってはディフォルトから変更できないものもあるようです。
  • そのままだと通常の投稿の時のもイベントが起こってしまいますので、$(window).offでイベントをはずすか、フラグを使ってフラグがたっているときのみ処理を行います。
  • イベントを一旦外すとつけられません。通常の投稿ボタンではイベントを外すかと思いますが、キャンセルをしたときは外れたままになってしまいます。

参考リンク

ページ離脱防止のためにJavaScriptでアラートを表示する
ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …