skillup

技術ブログ

JavaScript

途中入力離脱防止処理 JavaScript

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

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

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

ソース

注意点

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

参考リンク

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

JavaScriptのcall,bind+npmからのライブラリ読み込みで

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。 で、その時の処理に関して。 例えばlea …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

アーカイブ