HTMLの入力フォームに文章を入力している途中でそのウィンドウを閉じてしまったり、
リンクをクリックして別のページへ移動してしまったりして今まで入力したデータが
パーになってしまうことがあります。
この問題に対し、ウィンドウを閉じたり、更新したり、ページ移行したりするときに
呼び出される処理を利用して予防策をこうじることができます。
まず、ウィンドウを閉じる時の処理は以下のように指定できます。
1 2 3 |
$(window).bind("beforeunload",function(e){ // ウィンドウを閉じる際の処理を記載。 }); |
ここで、例えば入力フォームに何かしら入力がされている状態で、ユーザが
ページを閉じるアクションをした時に、本当に移行していいかを尋ねる
ウィンドウをだし、”いいよ!”といわれた場合だけ本当にページを閉じる
という処理を施せば先の問題の防止策になるわけです。
その例を以下に示します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<title>bind()</title> $(function(){ $(window).bind("beforeunload",function(e){ var str=$('textarea').val(); if(str.length > 0){ return "このページから移動しますか? 入力したデータは保存されません。"; } }); }); <textarea name="body" cols="30" rows="5"></textarea> |
1. 入力フォームの入力文字を取得
var str=$(‘textarea’).val();
2. 入力文字数が1文字以上の場合、本当に移動していいかどうかを問いかける。
if(str.length > 0){
return “このページから移動しますか? 入力したデータは保存されません。”;
}
これだけで、移行していいかどうかのウィンドウが現れ、”はい”以外であれば、
移行は中断されます。
/