如何測試用戶是否對錶單做了任何更改（如果他們沒有保存它）

基本上與發佈問題時的stackoverflow功能相同，如果您開始撰寫帖子，然後嘗試重新加載頁面。您會收到一個javascript警告框警告消息。如何測試用戶是否對錶單做了任何更改（如果他們沒有保存它）

我明白如何檢查表單是否已被更改，但我該怎麼做下一步。

I.E：如何在離開頁面時檢查此頁面，在此處獲得「此頁面要求您確認您要離開 - 您輸入的數據可能無法保存。」？

編輯：找到正確的答案在這裏的另一個問題https://stackoverflow.com/a/2366024/560287

2011-12-14 John Magnolia

我很肯定，如果你搜索「jQuery的檢測格式轉換插件」，你會發現很多東西比這個半僞代碼我是要寫更多的可用：

formChanged = function(form) { 
    form.find('input[type="text"], textarea').each(function(elem) { 
     if (elem.defaultValue != elem.value) { 
      return true; 
     } 
    }); 
    // repeat for checkbox/radio: .defaultChecked 
    // repeat for ddl/listbox: .defaultSelected 
    return false; 
}

使用：

if (formChanged($('form')) { // do something }

請注意，這是爲了檢測原始呈現值的變化。例如，如果文本框的值爲「x」，並且用戶將其更改爲「y」，則將其更改回「x」。這會將其檢測爲無變化。

如果你不關心這種情況下，你可以這樣做：

window.formChanged = false; 

$(':input').change(function() { 
    window.formChanged = true; 
});

然後，你可以檢查該值。

來源

2011-12-14 00:35:50 rkw

95％正確的答案，雖然我用window.onbeforeunload – 2011-12-18 19:41:07

是的，這是JavaScript作爲HTML只是一種標記語言。

是的，jQuery可以用於此。它優於vanilla JavaScript，因爲它使事情變得更容易，但它確實增加了一些開銷。

來源

2011-12-14 00:14:50 Bojangles

它確實增加了一些開銷，但它通常做的事情總比你寫的要好，彌補了（大部分）開銷。 – 2011-12-14 00:20:52

有很多方法可以檢查任何表單的控件是否發生了變化。

要檢查默認的更改，大多數可以通過defaultVarue屬性進行檢查。對於單選按鈕，您應該始終默認選中一個，因此請檢查它是否仍處於選中狀態。對於選擇類似，將所選屬性設置爲默認選項並查看它是否仍處於選中狀態，依此類推。

或者，如果所有表單控件都有一個ID或唯一名稱，則可以收集所有的onload值，然後在提交表單時檢查它們的值。

另一種方法是偵聽每個窗體控件上的更改事件，但這有點超過頂部。

這裏有一個POJS版本採用相同的方法爲RKW的回答是：

/* 
    Check if any control in a form has changed from its default value. 

    Checks against the default value for inputs and textareas, 
    defaultChecked for radio buttons and checkboxes, and 
    default selected for select (option) elements. 

    */ 
    function formChanged(form) { 
    var control, controls = form.elements; 
    var tagName, type; 

    for (var i=0, iLen=controls.length; i<iLen; i++) { 
     control = controls[i]; 
     tagName = control.tagName.toLowerCase(); 
     type = control.type; 

     // textarea 
     if (tagName == 'textarea') { 
     if (control.value != control.defaultValue) { 
      return true; 
     } 

     // input 
     } else if (tagName == 'input') { 

     // text 
     if (type == 'text') { 
      if (control.value != control.defaultValue) { 
      return true; 
      } 

     // radio and checkbox 
     } else if (type == 'radio' || type == 'checkbox') { 
      if (control.checked != control.defaultChecked) { 
      return true; 
      } 
     } 

     // select multiple and single 
     } else if (tagName == 'select') { 
     var option, options = control.options; 

     for (var j=0, jLen=options.length; j<jLen; j++) { 
      option = options[j]; 
      if (option.selected != option.defaultSelected) { 
      return true; 
      } 
     } 
     } 
    } 
    // Not really needed, but some like the return value to 
    // be a consistent Type 
    return false; 
    }

請注意，你需要小心選擇元素。對於單個選擇，您應該總是設置一個選項來選擇，就好像沒有默認選擇一樣，一些瀏覽器將使第一個選項被選中，而其他選項將不會被選中。

來源

2011-12-14 01:34:21 RobG

如何測試用戶是否對錶單做了任何更改（如果他們沒有保存它）

回答

相關問題