Chrome Autofill охватывает Autocomplete для API Карт Google v3

Я использую Google Maps Javascript v3 для настройки автозаполнения в поле ввода HTML следующим образом:

http://imgur.com/Rm6X2FI.png - (без автозаполнения)

У меня проблема в том, что автозаполнение Chrome закрывает автозаполнение карт следующим образом:

http://imgur.com/7a2QM7L.png - (с автозаполнением)

Я нашел решение в сети пару месяцев назад (см.: Отключение автозаполнения Chrome), но, похоже, это решение больше не имеет никакого эффекта.

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />

Можно ли как-то остановить отображение автозаполнения Chrome в верхней части списка автозаполнения Карт Google?

РЕДАКТИРОВАТЬ: остановить Google Chrome автозаполнение ввода не обеспечивает решение моей текущей проблемы. Проблема связана с раскрывающимся списком автозаполнения Chrome в поле ввода, а не с тем, что поле ввода автоматически заполняется значением автозаполнения.

Ответ 1

Это сводило меня с ума. Иметь такую же проблему. Мы используем скрипты, чтобы вытащить значения полей для пользователя, чтобы выбрать его, и НЕ хотите, чтобы браузер автоматически отключил его. Хром, похоже, является bugger (последняя версия 42.0.2311.135 m), Firefox (FF), с которой мы можем работать.

Таким образом, мы имеем дело с браузером автозаполнения и хромированной автозаполнения, а также. Если я добавлю: <form autocomplete = "off"> наверху, он останавливает автозаполнение в FF и Chrome, но не AUTOFILL в Chrome. Изменение "off" на "false" ничего не делает для любого браузера. Решена проблема FF, но не Chrome, поскольку она показывает уродливое поле AUTOFILL над содержимым.

Если вы добавите autocomplete = "off" в каждое из полей отдельно, то снова, работает в FF, но для полей ввода, у которых этот атрибут автозаполнен в Chrome, выключен, но автозаполнение все еще не работает уродливой головой.

Теперь странно, что если вы измените значение в отдельном поле ввода с "off" на "false", то, похоже, он встряхнет Chrome, и для поля у вас есть этот параметр для автозаполнения = "false", тогда вы ТОЛЬКО видите значения автозаполнения (если что-то было введено в поле раньше), и все остальные поля ввода ничего не показывают! Вы также можете установить это значение как no или xx или что-то еще, и похоже на Chrome barfs на недопустимое значение для автозаполнения, и форма реагирует странно. Если у вас есть 5 полей и установите это для третьего поля, поля 1,2, 4 и 5 пусты, но поле 3 показывает автозаполнение.

Это пример для копирования и беспорядка (попробуйте переместить атрибут автозаполнения в разные поля и посмотреть, как он реагирует):

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input autocomplete="false" name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

Мое решение отключить автозаполнение и автозаполнение Chrome (вы можете поместить скрытое поле ввода сверху или снизу ниже submit). Добавьте этот <input autocomplete = "false" name = "hidden" type = "text" style = "display: none;"> в код:

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    <br />First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

Итог: Chrome придерживается автозаполнения = выключен, но проблема с автозаполнением Chrome - проблема. Надеюсь это поможет.

Ответ 2

Ни один из вышеперечисленных ответов не работал для меня (Chrome 64.0.3282.186, x64 windows).

TL; DR: Код Google Maps меняется autocomplete атрибут off, так что даже если вы установите его на new-password, вы все равно получите автозаполнение. Хак, который я использую, - это прослушивать мутации этого атрибута и затем переопределять его. Примечание. Простое изменение атрибута после вызова в Google Maps не работает.

Настройте MutationObserver перед инициализацией Автозаполнения Карт Google, который немедленно прекращает прослушивание мутаций, а затем устанавливает атрибут new-password.

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });

Ответ 3

Решение jQuery:

$('#address').focus(function() {
    $(this).attr('autocomplete', 'new-password');
});

Ответ 4

Чтобы процитировать Elmux, прокомментируйте ответ fooobar.com/questions/10066636/... выше:

В Chrome 71 я удалил атрибут-заполнитель из консоли, и он работает автоматически. Если я изменю значение атрибута на что-то другое, оно тоже будет работать. Наконец, избегайте использования термина "Адрес" в атрибуте заполнителя. - Elmux

Для меня (30 декабря 2018 года, Chrome 71) это был правильный, но не интуитивный ответ.

Ответ 5

Благодаря GSTAR. Вместо Jquery я использовал приведенный ниже код, и это работает для меня

<input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');">

Ответ 6

Для тех, кто использует Angularjs, я создал директиву, основанную на ответе @Rimmel, который работает для меня в Chrome 66.0.3359.139. Ниже приведен код:

(function(){
  'use strict'; 
  angular.module('app.directive')
    .directive('stopAutofill', stopAutofillDirective);

  function stopAutofillDirective() {
      return {
        restrict: 'A',
        link: function (scope, element) {
            var observerHack = new MutationObserver(function () {
                observerHack.disconnect();
                element.attr("autocomplete", "new-password");
            });

            observerHack.observe(element[0], {
                attributes: true,
                attributeFilter: ['autocomplete']
            });
        }
      };
    };
})();

Ответ 7

Используйте autocomplete = "new-password" для поля ввода, для которого вы хотите отключить автозаполнение. Google Chrome намеренно игнорирует autocomplete = "off | false", но если вы установите "новый пароль", то он игнорирует автозаполнение.

Также проверьте способ использования автозаполнения API Google Адресов, в идеале это должен быть подход к реализации: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Ответ 8

Я попробовал образец из Google Address Finder и получил ту же проблему:

Обновленный ответ

С новой версией хром вам нужно добавить: autocomplete="off" на ваш вход:

<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

Оригинальный ответ - обход

Это вход автокомплекта, который имеет событие: onFocus="geolocate()":

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

Я добавил эту строку для геолокации, чтобы скрыть автозаполнение:

function geolocate() {
    // add this line to hide the autocomplete
    $("#autocomplete").attr("autocomplete", "new-password");

    // other stuff
}

Ответ 9

Временное решение:

$('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })

Ответ 10

Мне удалось исправить эту проблему для Chrome 69, изменив местозаполнитель ввода.

У меня было 2 входа, привязанных к автозаполнению Google Адресов. Как только вы щелкнете по полю, автозаполнение отобразится, предлагая варианты автозаполнения. У меня также была настройка прослушивателя для изменения атрибута "автозаполнение" ввода на что-то случайное, например "no-google-autofill". Это работало хорошо, пока я не обновился до Chrome 69.

В конце концов, я исправил это, изменив местозаполнитель ввода с "Почтовый индекс" на "Площадь". Судя по всему, автозаполнение вызвано из-за заполнителя. Иногда Chrome пытается быть слишком умным для своего же блага.

Ответ 11

Для меня я вставил строку во время выполнения в середине идентификатора поля ввода и имени поля формы, которое было заменено идентификатором сеанса текущего сеанса пользователя. Идентификатор сеанса настолько близок, насколько каждый может получить уникальный для каждого пользователя и сеанса.

Короче говоря, то, что раньше было полем с именем "cust_address", стало "cust_a734ohljehgto87y34hpwy9pho3ghseddress", так же как и идентификатор поля. Мой код ввода текстового поля выглядел так:

'<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">'

Для дополнительных мер предосторожности я добавил autocomplete = "new-password", который, кажется, работает для других полей, но не для адреса, хотя, кажется, он иногда работает, и я не определился, что вызывает его сбой или работу (пока)...

Когда мой пользователь запрашивает форму, я загружаю ее в переменную в PHP и заменяю все экземпляры% sessionid% идентификатором сеанса текущего сеанса пользователя, а затем выводю его в браузер.

До сих пор это работало как прелесть, но моя система все еще находится на стадии бета-тестирования, поэтому Chrome не контролировал тысячи входов, чтобы Chrome мог понять логику и обойти ее - надеюсь, они не тратят слишком много времени на обход эти исправления, особенно с учетом того, что GOOGLES OWN SYSTEM переопределяет GOOGLES OWN SYSTEM с автозаполнением, переопределяя автозаполнение из API календарных мест!

Ответ 12

У меня были поля имени пользователя и пароля на той же странице.

Поместите простой неиспользуемый <form></form> вокруг них, и это решило проблему автозаполнения.

Ответ 13

Это сводит меня с ума, после тестирования многих вещей, то, что я должен был сделать, чтобы предотвратить такое поведение, не дает подсказки хрому, что адрес.

Не легко сделать его удобным для пользователя, не упоминая слова "адрес", "улица" и т.д.

Я заканчиваю тем, что использую слово "Местоположение" в заполнителе. Я не использовал никаких других атрибутов, таких как автозаполнение. Просто никогда не упоминайте его адрес, и Chrome перестанет это делать.

Я надеюсь, что это может помочь другим.

Ответ 14

<input id="autocomplete" autocomplete="nope" type="text" onFocus="this.setAttribute('autocomplete','nope'); geolocate();">

Ответ 15

попробуйте добавить это в свой файл css:

.pac-container{
    display:none!important;
}