skillup

技術ブログ

JavaScript

途中入力離脱防止処理 JavaScript

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

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

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

ソース

注意点

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

参考リンク

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

-JavaScript
-

執筆者:


comment

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

関連記事

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

webpackについて再履修2

以前やったこの記事への追記的な意味で。 webpackについて再履修 Contents1 webpack-cli2 gulp-webpackは非推奨3 devtoolでデバッグ可能 webpack-c …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

vueに関する小ネタ(computed、v-classなど)

先日は埋め込み形式で、vueを書いてましたが、その時に新たな気づいた小ネタなど。 Contents1 computed2 v-class3 ajaxのasync:false computed 主に、v …

no image

JavaScriptでのDom操作に関して

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