Подтвердить что ты не робот

Как поддерживать пользовательский ввод Когда вызывается window.history.back()?

У меня есть две HTML-страницы на сайте, над которым я работаю. Первая страница вводит пользовательский ввод (начальное и конечное местоположение), а затем передает информацию в API Javascript Google Maps, чтобы определить расстояние между двумя местоположениями.

User Input for Locations

Вторая страница отображает эту информацию для пользователя.

Однако у меня также есть кнопка с именем Edit, которая вызывает onclick="window.history.back()".

Проблема, с которой я столкнулась, состоит в том, что в двух разделах ввода для пользователя также используется автозаполнение Google для адресов, поэтому, когда я перехожу на следующую страницу и нажимаю кнопку Edit, пользовательский ввод удаляется из ввода в то время как без автозаполнения Google он сохраняется в этом месте. Я предполагаю, что проблема заключается в самом автозаполнении Google, но как я могу это исправить?

Вот автозаполнение Javascript для Google:

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 geographical location,
// as supplied by the browser '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());
    });
  }
}
4b9b3361

Ответ 1

вам нужно будет иметь систему для хранения/обновления/восстановления данных формы. одним из способов сделать это является наличие общих change и input обработчиков, которые сохраняют состояние в localStorage, а затем восстанавливают его обратно на загрузку страницы (или любой другой обработчик, который у вас может быть)

Вот скрипка, показывающая простой способ сделать это: http://jsfiddle.net/wnbcsrsL/

Вам нужно будет сделать некоторое пространство имен на основе страницы, на которой вы находитесь, чтобы избежать столкновения имен (и вам также необходимо убедиться, что каждый вход имеет имя), но кроме того, что это просто

Ответ 2

Можете ли вы изменить данный автозаполненный автоответчик Google? или это ограниченный код поставщика?

Если это так, я бы попытался удалить эту строку:

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

Я не думаю, что это имеет какое-то отношение к использованию Истории. Вы можете подтвердить это, проверив, отличается ли поведение кнопки редактирования от кнопки "Назад" браузера.

Ответ 3

Я решил это, удалив атрибут autocomplete="off" перед отправкой. Если вы уже удалили его после инициализации, встроенный автозаполнение из браузера (протестированное в Chrome) перезаписывает список автозаполнения мест google. Это сохраняет намеренное поведение от Google, а также вводимые значения в браузере.

Решение jQuery:

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

Ответ 4

Чтобы сохранить значения в поле edittext при перезагрузке страницы, вам необходимо использовать различные механизмы локального хранилища, которые поддерживаются браузерами. Некоторые из них следующие:

  • API файлов
  • IndexedDB
  • Веб-хранилище
  • Cookies

Для этих конкретных сценариев я бы использовал веб-хранилище, в котором у вас будет постоянное хранилище на основе сеанса. Данные в поле 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, если данных не существует.

Ответ 5

вместо window.history.back() вы также можете передавать параметры с веб-страницы 2 на веб-страницу 1 (и наоборот) по параметрам в URL-адресе.

здесь вы можете увидеть, как передать параметры с помощью javascrip: Как получить значение из параметров GET?

Итак, на вашей второй веб-странице замените

window.history.back()

to

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

На первой странице в загруженной странице вы можете проверить, имеются ли параметры и установить значения полей ввода

grtz, S.