Question

我正在监视表单输入元素以进行更改（在页面退出时提醒用户未保存的表单更改）。

据我了解，只有在某些输入元素失去焦点（例如，文本框）时才会触发jQuery更改事件。

这是有问题的，因为用户可以编辑单个文本框，然后尝试退出，并且不会触发文本框更改事件。

这是我走了多远：

var formChanges = {
    override: false,
    changed: false,
    checkChanges: function() {
        if(!formChanges.override) {
           if(formChanges.changed) {
               return "There are currently unsaved changes.";
           }
        }
    },
    init: $(document).ready(function() {
        $('#checkThis').submit(function() { //'checkThis' is the form ID
           formChanges.override = true;
       });
       $(':input').change(function() {
           formChanges.changed = true;
       });
    })
}
window.onbeforeunload = formChanges.checkChanges;

关于如何克服这个问题的任何想法？

Answer 1

实际上对于你正在做的事情，我认为你最好使用按键或键盘输入和改变选择和收音机这样

   $('input:text, textarea').keypress(function() {
       formChanges.changed = true;
   });

   $('select, input:radio, input:checkbox').change(function(){
       formChanges.changed = true;
   });

Answer 2

这看起来效果很好：

var oldForm = null;
function monitorChanges(form) {
    if(oldForm == null) {
        oldForm = ($(form).serialize());
    } else {
        alert(oldForm == $(form).serialize());
    }
}

Answer 3

在checkChanges之前卸载时，“hack”会关注一个不相关的元素。按键并不意味着改变。

编辑：像Nicola说的那样，为了确保它是否有所改变，你可能需要与原始值进行比较。

jQuery更改事件（监视更新的表单）

3 个答案: