如何維護用戶輸入調用window.history.back（）時？

Question

我對我工作的一個網站兩個HTML頁面。第一頁發生在用戶輸入（起點和終點的位置），然後傳遞信息到谷歌地圖API的Javascript在爲了確定兩個地點之間的距離。

第二頁顯示該信息的用戶。

不過，我也有一個叫Edit按鈕，調用onclick="window.history.back()"。

我遇到的問題是，這兩個部分用戶輸入也使用了谷歌的自動完成地址，所以當我去到下一個頁面，點擊Edit按鈕，用戶輸入從輸入框中刪除，而沒有Google自動填充功能，它仍然保留在該位置。我假設這個問題存在於Google Autocomplete本身中，但我該如何解決這個問題？

這裏是JavaScript的谷歌自動完成：

google.maps.event.addDomListener(window, 'load', initialize); 
// ========================================================================================================== 
// ========================================================================================================== 
// ========================================================================================================== 
// USES THE GOOGLE PLACES LIBRARY 
// ============================== 
// This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

var placeSearch, autoCompleteOrigin, autoCompleteDest; 
var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
}; 

function initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autoCompleteOrigin = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('start')), 
     { types: ['geocode'] }); 
    autoCompleteDest = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('destination')), 
     { types: ['geocode'] }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autoCompleteOrigin, 'place_changed', function() { 
    fillInAddress(); 
    }); 
    google.maps.event.addListener(autoCompleteDest, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
} 

// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     var circle = new google.maps.Circle({ 
     center: geolocation, 
     radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
    }); 
    } 
} 

Answer 1

爲了保持的EditText字段中的值時重新加載頁面，你需要利用由瀏覽器所支持的各種本地存儲機制。是他們中的一些如下：

• 文件API
• IndexedDB的
• Web存儲
• 餅乾

對於這個特定的情況下我會利用Web存儲，在那裏你將有基於持久性會話的存儲。 edittext字段中的數據將一直保留到用戶完全關閉瀏覽器。

下面是一個代碼示例實現：

window.onbeforeunload = function() { 
    localStorage.setItem(addresss1, $('#addresss1').val()); 
    localStorage.setItem(addresss2, $('#addresss2').val()); 

}

這是一個syncronous調用，因此每當用戶切換回這個頁面，您可以檢查，看看數據是否仍然存在。遵循此代碼示例。

window.onload = function() { 

    var name = localStorage.getItem(address1); 
    if (name !== null) $('#address1').val(address1); 

    // ... 
} 

getItem返回null如果數據不存在。

Answer 2

而不是window.history.back（）您也可以通過url中的參數將參數從網頁2傳遞到網頁1（反之亦然）。

在這裏你可以看到如何傳遞參數與的javascrip：How to get the value from the GET parameters?

在第二次的網頁替換

的window.history。回（）

到

了window.location = http://mywebpage1.bla?param1=something&param2=something

在頁面的onload你的第一頁，你可以檢查，看看是否有參數存在並設置輸入字段的值

grtz，S。

Answer 3

您可以修改給定的Google Autocomplete JS嗎？或者是受限制的供應商代碼？

如果是這樣，我會很渴望嘗試刪除這一行：

document.getElementById(component).value = ''; 

我不認爲這有什麼與你的使用歷史。您可以通過檢查編輯按鈕的行爲與瀏覽器「後退」按鈕的行爲不同來確認。

Answer 4

你將不得不有一個系統來存儲/更新/恢復表單數據。這樣做的一個方法就是讓通用change和input處理程序保存狀態變成localStorage，然後將其還原回在頁面加載（或任何其他處理程序，你可能有）

這裏是在一個簡單的方法提琴這樣做：http://jsfiddle.net/wnbcsrsL/

您需要根據您是在以避免名稱衝突在頁面上做一些命名空間（和你還需要確保每個輸入都有一個名字），但除此之外，它的簡單

Answer 5

我在提交之前通過刪除autocomplete="off"屬性解決了這個問題。如果您已在初始化後將其刪除，則瀏覽器的內置自動完成功能（在Chrome上測試）會覆蓋Google地方自動完成列表。這保留了Google的預期行爲以及瀏覽器導航的輸入值。

jQuery的解決方案：

$('input[type="submit"]').click(function() { 
    $('input[autocomplete="off"]').removeAttr('autocomplete'); 
}