it-swarm.com.ru

Chrome Autofill покрывает автозаполнение для Google Maps API v3

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

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

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

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

Я нашел решение в сети пару месяцев назад (ref: Отключение автозаполнения 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 в поле ввода, а не с тем, что поле ввода автоматически заполняется значением автозаполнения.

25
Cole Waldrip

Это сводило меня с ума. Есть такая же проблема. Мы используем сценарии, чтобы получить значения полей для выбора пользователем, и НЕ хотим, чтобы браузер автоматически что-либо испортил. Похоже, Chrome - самая лучшая версия (последняя версия 42.0.2311.135 м), Firefox (FF), с которой мы можем работать. 

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

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

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

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

<!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 (вы должны иметь возможность поместить скрытое поле ввода вверху или внизу под отправкой). Добавьте это <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 придерживается autocomplete = off, но проблема заключается в автозаполнении Chrome. Надеюсь это поможет.

16
Player 0001

Ни один из приведенных выше ответов не работал для меня (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']
    });
32
Rimmel

решение jQuery:

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

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

Короче говоря, то, что раньше было полем с именем "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 календарных мест!

0
Dogman

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

$('#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');
        }
    })
0
code passionate

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

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

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

0
Daniel N.

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

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

0
Adeesh Jain

Чтобы процитировать комментарий Elmux к ответу https://stackoverflow.com/a/50927328/1350573 выше:

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

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

0
Philip Callender

Я попробовал пример из Поиск адресов Google , и получил ту же проблему:

 enter image description here

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

С новая версия chrome все, что вам нужно, это добавить: 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"/>

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

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

    // other stuff
}
0
Hooman Bahreini

Для тех, кто использует 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']
            });
        }
      };
    };
})();
0
Yoan Pumar