Benim başvuru formları ile bazı sayfaları var.

Nasıl biri uzağa gider ya da tarayıcı sekmesini kapatır, onaylamak için istenir olması gerektiği şekilde form güvenli gerçekten kaydedilmemiş verileri formu bırakmak ister miyim?

Kısa, yanlış cevap

handling the beforeunload event and returning a non-null string bunu yapabilirsiniz:

window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = 'It looks like you have been editing something.';
                              'If you leave before saving, your changes will be lost.';

    (e || window.event).returnValue = confirmationMessage; //Gecko   IE
    return confirmationMessage; //Gecko   Webkit, Safari, Chrome etc.
});

Bu yaklaşım ile sorunbir form göndermek, ayrıca olay boşaltın ateş. Bu kolayca bir form gönderme olduğunu bir bayrak ekleyerek sabit:

var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. ';
                                  'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko   IE
        return confirmationMessage; //Gecko   Webkit, Safari, Chrome etc.
    });
};

Gönderirken o zaman ayarlayıcı arama:

<form method="post" onsubmit="setFormSubmitting()">     
    <input type="submit" />
</form>

Ama okumaya devam edin...

Uzun, doğru cevap

Ayrıca bu mesajı göstermek istemiyorumkullanıcı form üzerinde bir şey değişmedi. Tek çözüm "sadece eğer gerçekten alakalı mı diye sor tetikler." bayrak, kirli ile birlikte beforeunload olay kullanmaktır

var isDirty = function() { return false; }

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        if (formSubmitting || !isDirty()) {
            return undefined;
        }

        var confirmationMessage = 'It looks like you have been editing something. ';
                                  'If you leave before saving, your changes will be lost.';

        (e || window.event).returnValue = confirmationMessage; //Gecko   IE
        return confirmationMessage; //Gecko   Webkit, Safari, Chrome etc.
    });
};

Şimdi isDirty yöntemi uygulamak için, çeşitli yaklaşımlar vardır.

jQuery and form serialization ama bu yaklaşım bazı kusurları vardır kullanabilirsiniz. Önce değiştirmek için kod üzerinde çalışmak için herhangi bir form ($("form").each()), ama en büyük sorun olduğunu bir WordPress kullanmak serialize() sadece adı olmayan devre elemanları, yani değişen herhangi bir engelli ya da adı açıklanmayan bir eleman değil tetik kirli bayrağı. * *22, denetimleri salt okunur yerine yapma ya, ve sonra kontroller daha seri hale getirilirken devre dışı bırakıp yeniden etkinleştirmek gibi.

Olaylar bu şekilde gitmek gibi görünüyor. listening for keypresses deneyebilirsiniz. Bu olay birkaç sorunları var:

• Onay kutuları, radyo düğmeleri tetiklemez, ya da diğer öğeleri fare girişi ile değiştirilmiş.
• Bu gibi alakasız yazmak için tetikleyecektirKontrolanahtar.
• Değerleri JavaScript kodu ile sette tetiklemez.
• Kesme tetikleyici veya bağlam menüleri ile metin yapıştırmak yok.
• Datepickers gibi sanal giriş için bir iş veya gizli bir giriş değeri için beautifiers button checkbox olmaz.

change event ayrıca, 25**, bu yüzden de sanal giriş için işe yaramaz.

Sayfanızda Binding the input event to all inputs (and textareas and selects) 27* *ve, tüm olay işleme çözümleri yukarıda da belirtildiği gibi, geri alma desteği yok. Bir kullanıcı bir metin kutusu değişiklikleri ve o zaman, ya da çek ve unchecks checkbox geri alır, formun hala kirli olarak kabul edilir.

Ve daha fazla davranış uygulamak istediğinizde, bazı unsurları göz ardı gibi, hatta daha fazla çalışmak zorunda kalacaksın.

Tekerleği yeniden icat etmeyin:

Bu çözümleri ve gerekli tüm çözümler, uygulama hakkında düşünmek önce, tekerleği yeniden icat olduğunu ve diğerleri çoktan çözmüş sorunları içine çalışan meyillisiniz.

Eğer uygulama zaten bir WordPress kullanmak kullanıyorsa, test, kendi haddeleme kodu yerine tutulan kullanın, ve tüm bunlar için üçüncü bölümü bir kütüphane kullanabilirsiniz. jQuery's Are You Sure? plugin büyük işler, onların demo page bkz. Bu kadar basit

<script src="jquery.are-you-sure.js"></script>

<script>
  $(function() {
    $('#myForm').areYouSure(
      {
        message: 'It looks like you have been editing something. '
                 'If you leave before saving, your changes will be lost.'
      }
    );
  }

</script>