skillup

技術ブログ

JavaScript

途中入力離脱防止処理 JavaScript

投稿日:

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

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

ソース

注意点

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

参考リンク

http://blog.yuhiisk.com/archive/2016/02/02/alert-with-onbeforeunload.html
http://watanabeyu.blogspot.jp/2013/07/beforeunload.html

-JavaScript
-

執筆者:


comment

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

関連記事

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 http:/ …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …