blog

BLOGブログ

ARCHIVES

VAX

何事にも確認が大事。ウィンドウ閉じる前にも確認しようず

20151221_main

全国1000万32人のファンの皆さまお疲れさまです。

 

vaxだず。

 

まだまだ続け..(ry
今年もあと 10日を切り
カウントダウンが始まりましたね。

 

 

 

この記事が公開される頃にはみなさんクリスマス気分であれになっている頃でしょう。

いいですね。(^ω^)

 

 

前から思ってましたが ω ←これなんなんですかね?

 

それはさておき
今日は window を閉じる前に確認させて離脱率を気持ち抑えるやつをやります。

 

 

 

20151221_002

 

 

 

そもそもなんでこれが必要かというと

 

お問い合わせのページなんかでフォーム入力中に間違えて
閉じるボタン押しちゃってもうめんどくさくて入力なんかしてやらない!

 

こんな人がたくさんいると思います。

 

僕もその一人です。。。。

 

 

そんなイラッち達のためにも閉じる前にワンクッション入れてあげるといった
優しさなのです。
クリスマス前にイライラなんかしたくないですよね?
そういうことです。
では
jQuery を使って

 

jQuery(function($){

$(window).on(“beforeunload”,function(e){
return ‘文字入力してあるけど移動しちゃうお?';
});

});

 

 

beforeunload関数は、ページ移動を行おうとした場合やタブ・ウィンドウを閉じようとしたときにダイアログを表示をしてくれるってやつです。

応用編としては

先ほどのフォーム入力を確認してー

みたいな作業が入ると思うので

 

 

html

 

<p>文字が入力されている場合は閉じる前に確認が出るお(^ω^)</p>
<input type=”text” name=”test” class=”check” value=”” />

 

 

js

 

jQuery(function($){

$(window).on(“beforeunload”,function(e){

var check = $(‘.check’).val();

if( check != “” ) {
return ‘文字入力してあるけど移動しちゃうお?';
}

});

});

 

 

demo
これで文字入力があった場合はページ遷移する前にダイアログが出て
ない場合におさらばみたいなことが可能です。

 

なんか切ないですね。。。

 

 

例えるなら

ココイチに行ったときお金があるなら食べるしお金がないなら食べずに帰る

悲しすぎる。。。。

 

なんとかこんな感じにならないようみなさんも気を付けてください。

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事