JSを使用して、ページ離脱時の確認を作成(といってもコピペですが…)しました。
下記のソースのように、submitボタンについては、JSにて行っております。
問題としては、IEとChromeではページ離脱確認JSの挙動が異なっており困っております。
Chromeでは意図した通りの挙動で
1)画面初期表示
2)テキストエリアに文字入力
3)一時保存、確定(name="btn_regist")押下以外でページを離脱する
4)確認ダイアログの表示
または、
11)画面初期表示
12)テキストエリアに文字入力
13)一時保存、確定(name="btn_regist")押下でページを離脱する
14)確認ダイアログは非表示で、通常登録
になります。
IEは
1)画面初期表示
2)テキストエリアに文字入力
3)一時保存、確定(name="btn_regist")押下以外でページを離脱する
4)確認ダイアログの表示
または、
11)画面初期表示
12)テキストエリアに文字入力
13)一時保存、確定(name="btn_regist")押下でページを離脱する
14)確認ダイアログが表示
と14)のようにダイアログが表示されてしまっています。
alertを入れて追ってみたのですが、
chromeでは、一時保存、確定(name="btn_regist")押下には、
1番目:(3)を通る
2番目:(1)を通るが、changeFlgがfalseなので動作しない
と動いている要で鵜sが、
IEでは、一時保存、確定(name="btn_regist")押下には、
1番目:(1)を通る
2番目:(1)のフラグがtrueなのでダイアログ表示
3番目:(3)を通る
と
IEとChromeでの挙動が異なっているようです。
IEでもChromeと同じ挙動をさせる方法がありましたら
ご教授お願いできますでしょうか。
よろしくお願いいたします。
P。S.
FireFoxでも正常(?)通りの挙動になっております。
javascript
1 2//-------------------- 3// ページ離脱時確認用 4//-------------------- 5$(function(){ 6 7 changeFlg = false; 8 9 //(1) 10 $(window).on('beforeunload', function() { 11 if (changeFlg) { 12 return "ページを移動しようとしています。\n入力した内容が失われますがよろしいですか?"; 13 } 14 }); 15 16 //(2) 17 $("form input, form textarea, form select").change(function() { 18 changeFlg = true; 19 }); 20 21 //(3) 22 $("button[name=btn_regist]").click(function() { 23 changeFlg = false; 24 }); 25 26}); 27 28 29//-------------------- 30// submit時(仮登録・本登録)のボタンの挙動 31//-------------------- 32function submitAction(url, section) 33{ 34 $('form').attr('action', url); 35 $('form').submit(); 36}
HTML
1<form action method="post"> 2 <div id="user-button"> 3 <button class="buttonC" type="button" onclick="location.href='~'">戻る</button> 4 <button class="buttonC" type="button" name="btn_regist" value="一時" onclick="submitAction('~,~')">一時保存</button> 5 <button class="buttonC" type="button" name="btn_regist" value="確定" onclick="submitAction('~,~')">確定</button> 6 </div> 7</form>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/27 01:54