当window.history.back（）被调用时如何维护用户输入？

Question

我正在处理的网站上有两个HTML页面。第一页接受用户输入（开始和结束位置），然后将信息传递到 Google Maps Javascript API ，以确定两个位置之间的距离。

第二页显示该用户的信息。

但是，我还有一个名为Edit的按钮，可以调用onclick="window.history.back()"。

我遇到的问题是，用户输入的两个部分也使用Google自动填充功能来处理地址，因此当我转到下一页并单击Edit按钮时，用户输入将从输入框，而没有谷歌自动完成，它仍然保持在该位置。我认为问题出在Google自动填充功能本身，但我该如何解决？

以下是Google自动填充的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

您必须拥有一个系统来存储/更新/恢复表单数据。一种方法是使用通用change和input处理程序将状态保存到localStorage，然后在页面加载（或您可能拥有的任何其他处理程序）上将其还原< / p>

这是一个小提琴，显示了一种简单的方法：http://jsfiddle.net/wnbcsrsL/

您需要根据您所在的页面执行一些命名空间以避免名称冲突（并且您还需要确保每个输入都有一个名称），但除此之外它是直截了当的

Answer 2

你能修改给定的Google Autocomplete JS吗？或者是受限制的供应商代码？

如果是这样，我会急于尝试删除这一行：

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

我认为这与您对历史的使用无关。您可以通过检查编辑按钮的行为是否与浏览器的“后退”按钮不同来确认。

Answer 3

我通过在提交之前删除autocomplete="off"属性来解决此问题。如果您在初始化后已将其删除，则浏览器内置的自动填充功能（在Chrome上测试）会覆盖Google地方自动填充列表。这样可以保留Google的预期行为以及浏览器导航的输入值。

jQuery解决方案：

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

Answer 4

要在页面重新加载时维护edittext字段中的值，您需要使用浏览器支持的各种本地存储机制。其中一些如下：

• 文件API
• 索引资料
• 网络存储
• 缓存

对于这种特殊情况，我会使用Web存储，您将拥有基于持久会话的存储。 edittext字段中的数据将持续存在，直到用户完全关闭浏览器。

以下是代码示例实现：

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

}

这是一个同步调用，因此每当用户切换回此页面时，您都可以检查数据是否仍然存在。请遵循此代码示例。

window.onload = function() {

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

    // ...
}

如果数据不存在，

getItem会返回null。

Answer 5

而不是window.history.back（）您也可以通过网址中的参数将参数从网页2传递到网页1（反之亦然）。

在这里，您可以看到如何使用javascrip传递参数：How to get the value from the GET parameters?

所以在你的第二个网页上替换

  

window.history.back（）

到

  

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

在页面上载的第一页中，您可以检查是否存在参数并设置输入字段的值

grtz，S