1

ページに変更を加えた後、保存せずに別の場所に移動しようとすると、変更を保存するかどうかを確認するエラー メッセージが表示されます。

4

2 に答える 2

1

onbeforeunloadイベントはあなたが必要とするものです。stringユーザーがページから離れようとする (戻る、進む、リンクをクリックする、タブまたはウィンドウ自体を閉じる) たびに、表示されるを返す関数をバインドします (Chrome の場合のみ、他のブラウザーではデフォルト メッセージが表示されます)。 .

ダイアログのような確認がユーザーに表示されます。ユーザーが続行することを選択した場合、要求したアクションが実行されます。彼がページにとどまることを選択した場合、何も起こりません。

$('input').change(function(){
    window.onbeforeunload = function(){
         //Return the message that should be displayed in Chrome.
         // Other browsers will show default message.
         return "You have unsaved changes on this page";
     };
});

変更が保存されたら、window.onbeforeunload = nullユーザーがページから移動しようとしたときにメッセージを削除するように設定するだけです。

于 2012-04-24T06:30:11.227 に答える
0

考慮すべき点がいくつかあります。

入力に使用する要素。これは elementSelector (以下のコードで使用) に影響します。 jeditable などのプラグインを使用する場合、入力に使用する要素以上のことを知る必要があります。値を表示するために使用される要素についても知っておく必要があります。

sudhirsの回答のように、変更にバインドする場合は、インプレース編集を自動的にサポートする方法でバインドするのではなく、ライブでこれを行うことをお勧めします。

変更イベントにフラグを設定するフラグ ソリューションは、ユーザーが値を元に戻す場合には対応していません。

以下のコードの考え方は、監視したいすべての要素を反復して元の値を保存することです。アンロードする前に値が比較され、変更が見つかった場合は警告が表示されます。

$(function(){
   function getVal(){
      var val,node = $(this),nodeType = node.attr('type');
       if(this.nodeName.toLowerCase() == input){
           if(nodeType === "checkbox" || nodeType === "radio"){
               val = node.attr('checked');
           } else{
               val = node.val();
           }
       } else{
          val = node.text();
       }
       return val;
   }
   $(elementSelector).each(function)({
       $(this).data('original',getVal.Call(this));
   });
   window.onbeforeunload = function(){
      var hasChanges;
      $(elementSelector).each(function(){
            var org = $(this).data('original'),val = getVal.call(this);
            hasChanges = hasChanges || (org !== val)
      });
      if(hasChanges){
          return "Are you sure you wish to leave this page. Changes will be lost");
      }
   };
});

ユーザーが保存後にページにとどまる場合 (つまり、データが ajax を使用してサーバーに投稿される場合)、ストアの値を更新して、その後の変更がメッセージを正しく再び騙すようにする必要がありますが、ユーザーが変更しない場合、メッセージは騙されません。保存後は何でも

于 2012-04-24T06:38:40.440 に答える