У меня были проблемы с поведением автозаполнения Chrome в нескольких формах.

Все поля в форме имеют очень общие и точные имена, такие как «электронная почта», «имя» или «пароль», и они также autocomplete="off"установлены.

Флаг автозаполнения успешно отключил поведение автозаполнения, при котором выпадающий список значений появляется, когда вы начинаете печатать, но не изменял значения, в которых Chrome автоматически заполняет поля.

Это будет нормально, за исключением того, что Chrome неправильно заполняет поля ввода, например, заполняет ввод телефона адресом электронной почты. Клиенты жаловались на это, поэтому подтверждено, что это происходит во многих случаях, а не как какой-то результат того, что я сделал локально на моей машине.

Единственное текущее решение, о котором я могу подумать, - это динамически генерировать пользовательские входные имена, а затем извлекать значения в бэкэнде, но это кажется довольно хакерским способом решения этой проблемы. Существуют ли какие-либо теги или причуды, которые изменяют поведение автозаполнения, которые могут быть использованы для исправления этого?

Для новых версий Chrome вы можете просто ввести autocomplete="new-password"поле пароля и все. Я проверил, отлично работает.

Получил этот совет от разработчика Chrome в этом обсуждении: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Обратите внимание, что Chrome попытается определить поведение автозаполнения по имени, идентификатору и любому текстовому содержимому, которое он может получить вокруг поля, включая метки и произвольные текстовые узлы. Если есть токен автозаполнения, как street-addressв контексте, Chrome выполнит автозаполнение как таковое. Эвристика может быть довольно запутанной, поскольку иногда она срабатывает только в том случае, если в форме есть дополнительные поля или нет, если в форме слишком мало полей. Также обратите внимание, что autocomplete="no"будет работать, но autocomplete="off"не по историческим причинам. autocomplete="no"Вы говорите браузеру, что это поле должно быть заполнено автоматически как поле с именем"no" . Если вы генерируете уникальные случайные autocompleteимена, вы отключаете автозаполнение.

Если ваши пользователи посетили плохие формы, их информация для автозаполнения может быть повреждена . Чтобы они могли вручную вводить и исправлять информацию об автозаполнении в Chrome, это может быть необходимым для них действием.

Я только что обнаружил, что если у вас есть запомненное имя пользователя и пароль для сайта, текущая версия Chrome автоматически заполнит ваше имя пользователя / адрес электронной почты в поле перед любым type=passwordполем. Не имеет значения, как называется поле - просто предполагается, что это поле перед тем, как пароль будет вашим именем пользователя.

Старое решение

Просто используйте, <form autocomplete="off">и это предотвращает предварительное заполнение пароля, а также любое эвристическое заполнение полей на основе предположений, которые может сделать браузер (которые часто ошибочны). В отличие от использования, <input autocomplete="off">которое, по-видимому, в значительной степени игнорируется автозаполнением пароля (то есть в Chrome, Firefox его выполняет).

Обновленное решение

Хром теперь игнорирует <form autocomplete="off">. Поэтому мой оригинальный обходной путь (который я удалил) теперь в моде.

Просто создайте пару полей и сделайте их скрытыми с помощью «display: none». Пример:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Затем поместите свои настоящие поля под.

Не забудьте добавить комментарий, или другие люди в вашей команде будут интересоваться, что вы делаете!

Обновление март 2016

Только что протестировал с последним Chrome - все хорошо. Это довольно старый ответ, но я хочу упомянуть, что наша команда уже много лет использует его для десятков проектов. Это все еще прекрасно работает, несмотря на несколько комментариев ниже. Там нет проблем с доступностью, потому что поля display:noneозначают, что они не получают фокус. Как я уже говорил, вы должны поставить их перед вашими реальными полями.

Если вы используете javascript для изменения формы, вам понадобится дополнительный прием. Показать поддельные поля во время манипулирования формой, а затем снова спрятать их через миллисекунду.

Пример кода с использованием jQuery (при условии, что вы предоставляете своим поддельным полям класс):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

Обновление июль 2018

Мое решение больше не работает так хорошо, так как специалисты Chrome по борьбе с юзабилити усердно работают. Но они бросили нам кость в виде:

<input type="password" name="whatever" autocomplete="new-password" />

Это работает и в основном решает проблему.

Однако это не работает, если у вас нет поля пароля, а только адрес электронной почты. Также может быть трудно заставить его перестать желтеть и заполняться заранее. Решение поддельных полей может быть использовано, чтобы исправить это.

На самом деле вам иногда нужно добавить два лукавых поля и попробовать их в разных местах. Например, у меня уже были поддельные поля в начале формы, но Chrome недавно снова начал предварительно заполнять поле «Электронная почта» - так что я удвоил значение и добавил больше поддельных полей непосредственно перед полем «Электронная почта», и это исправило его. , Удаление первой или второй партии полей приводит к неправильному переусердствующему автозаполнению.

Обновление март 2020

Не ясно, если и когда это решение все еще работает. Кажется, иногда все еще работает, но не все время.

В комментариях ниже вы найдете несколько советов. Один из них, добавленный @anilyeni, может стоить еще одного исследования:

Как я заметил, autocomplete="off"работает на Chrome 80, если в нем менее 3 элементов <form>. Я не знаю, какова логика или где соответствующая документация об этом.

Также это может быть у @dubrox, хотя я его не проверял:

Большое спасибо за трюк, но, пожалуйста, обновите ответ, так как display:none;больше не работает, но position: fixed;top:-100px;left:-100px; width:5px;работает :)

Обновление АПРЕЛЬ 2020

Специальное значение для chrome для этого атрибута делает работу: (проверено на входе - но не мной) autocomplete="chrome-off"

После нескольких месяцев борьбы я обнаружил, что решение намного проще, чем вы можете себе представить:

Вместо autocomplete="off"использования autocomplete="false";)

Это так просто, и это работает как шарм в Google Chrome!

Обновление за август 2019 года (ссылка на @JonEdiger в комментариях)

Примечание: в Интернете много информации о том, что браузеры теперь воспринимают autocomplete = 'false' так же, как autocomplete = 'off'. По крайней мере, на данный момент, это предотвращает автозаполнение для этих трех браузеров.

Установите его на уровне формы, а затем для входов, которые вы хотите отключить, установите недопустимое значение, например, «none»:

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

Иногда даже autocomplete=off не помешает заполнить учетные данные в неправильные поля.

Обходной путь - отключить автозаполнение браузера с использованием режима readonly и установить запись в фокусе:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

focusСобытие происходит на щелчки мыши и обходе через поля.

Обновить:

Mobile Safari устанавливает курсор в поле, но не отображает виртуальную клавиатуру. Этот новый обходной путь работает как прежде, но обрабатывает виртуальную клавиатуру:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Демонстрационная версия https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Объяснение: Браузер автоматически вводит учетные данные в неправильное текстовое поле?

заполнение вводов некорректно, например заполнение ввода телефона адресом электронной почты

Иногда я замечаю это странное поведение в Chrome и Safari, когда поля пароля имеют одинаковую форму. Я полагаю, браузер ищет поле пароля для вставки сохраненных учетных данных. Тогда AutoFills имени пользователя в ближайший textlike-поле ввода, которое появляется перед полем пароля в DOM (только гадать , из - за наблюдение). Поскольку браузер является последним экземпляром, и вы не можете его контролировать,

Это исправление только для чтения сработало для меня.

Если вы реализуете функцию окна поиска, попробуйте установить typeатрибут searchследующим образом:

<input type="search" autocomplete="off" />

Это работает для меня на Chrome v48 и, кажется, является законной разметкой:

https://www.w3.org/wiki/HTML/Elements/input/search

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

Я также заметил, что проблема возникает чуть выше password поля.

Я попробовал оба метода, как

<form autocomplete="off"> а также <input autocomplete="off"> никто из них не работал для меня.

Поэтому я исправил это, используя фрагмент ниже - просто добавил другое текстовое поле чуть выше поля типа пароля и сделал его display:none .

Что-то вроде этого:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Надеюсь, это кому-нибудь поможет.

Я не знаю почему, но это помогло и сработало для меня.

<input type="password" name="pwd" autocomplete="new-password">

Понятия не имею почему, но autocompelete = "new-password" отключает автозаполнение. Он работал в последней версии 49.0.2623.112 Chrome.

Для меня просто

<form autocomplete="off" role="presentation">

Сделал это.

Протестировано на нескольких версиях, последняя попытка была на 56.0.2924.87

Вы должны добавить этот атрибут:

autocomplete="new-password"

Ссылка на источник: Полная статья

Это так просто и сложно :)

Google Chrome в основном выполняет поиск каждого первого видимого элемента пароля внутри тегов <form>, <body>и <iframe>включает автоматическое заполнение для них, поэтому, чтобы отключить это, вам нужно добавить фиктивный элемент пароля, как показано ниже:

1. • если ваш элемент пароля находится внутри <form>тега, вы должны поместить фиктивный элемент в качестве первого элемента в вашей форме сразу после <form>открытого тега

   • если ваш элемент пароля не находится внутри <form>тега, поместите фиктивный элемент в качестве первого элемента на вашей html-странице сразу после <body>открытого тега

2. Вам нужно скрыть фиктивный элемент без использования css, display:noneпоэтому в основном используйте следующее как фиктивный элемент пароля.

   <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>

Вот мои предлагаемые решения, так как Google настаивает на том, чтобы переопределить все обходные пути, которые люди, кажется, делают.

Вариант 1 - выделить весь текст по клику

Установите значения входов в качестве примера для вашего пользователя (например your@email.com) или метки поля (например Email) и добавьте класс, вызываемый focus-selectдля ваших входов:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

А вот и JQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

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

Вариант 2 - установить значение адреса электронной почты в пробел, а затем удалить его

Предполагая, что у вас есть два ввода, такие как электронная почта и пароль, установите значение поля электронной почты равным " "(пробел) и добавьте атрибут / значение autocomplete="off", а затем очистите его с помощью JavaScript.Вы можете оставить значение пароля пустым.

Если у пользователя по какой-то причине нет JavaScript, убедитесь, что вы урезали его входные данные на стороне сервера (вероятно, так и должно быть), если они не удаляют пространство.

Вот jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

Я установил тайм-аут, 15потому что5 в моих тестах время от времени показывалось, что утроение этого числа кажется безопасной ставкой.

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

Вариант 3 - скрытые входы

Поместите это в начале формы:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Убедитесь, что вы храните HTML-заметку, чтобы ваши другие разработчики не удалили ее! Также убедитесь, что имя скрытого ввода является актуальным.

Используйте css text-security: диск без использования type = password .

HTML

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

CSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}

В некоторых случаях браузер будет продолжать предлагать значения автозаполнения, даже если атрибут автозаполнения отключен. Такое неожиданное поведение может быть довольно загадочным для разработчиков. Хитрость в том, чтобы по-настоящему форсировать отсутствие автозаполнения, состоит в том, чтобы присвоить атрибуту случайную строку , например:

autocomplete="nope"

Я обнаружил, что добавление этого в форму не позволяет Chrome использовать автозаполнение.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Нашел здесь. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Действительно разочаровывает, что Chrome решил, что он знает лучше, чем разработчик о том, когда нужно автозаполнение. Имеет реальное чувство Microsoft к этому.

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

добавление атрибута readonly к тегу вместе с удалением события onfocus устраняет проблему

Для комбо паролей пользователей это легко решить. Эвристика Chrome ищет шаблон:

<input type="text">

с последующим:

<input type="password">

Просто прервите этот процесс, аннулировав это:

<input type="text">
<input type="text" onfocus="this.type='password'">

Майк Нельсонс предоставил решение не работает для меня в Chrome 50.0.2661.102 m. Простое добавление элемента ввода того же типа с отображением: ни один из них больше не отключает автоматическое заполнение собственного браузера. Теперь необходимо продублировать атрибут имени поля ввода, для которого вы хотите отключить автозаполнение.

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

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">

В 2016 году Google Chrome начал игнорировать, autocomplete=offхотя это в W3C. Ответ они разместили :

Сложность заключается в том, что где-то на протяжении всего пути web autocomplete = off становится значением по умолчанию для многих полей формы, без какой-либо реальной мысли о том, было ли это хорошо для пользователей. Это не означает, что есть не очень правильные случаи, когда вы не хотите, чтобы данные автозаполнения браузера (например, в системах CRM), но в целом мы рассматриваем их как случаи меньшинства. В результате мы начали игнорировать autocomplete = off для данных автозаполнения Chrome.

Что, по сути, говорит: мы лучше знаем, чего хочет пользователь.

Они открыли еще одну ошибку, чтобы опубликовать допустимые случаи использования, когда требуется autocomplete = off

Я не видел проблем, связанных с автозаполнением, во всех моих приложениях B2B, но только с вводом типа пароля.

Заполняется автозаполнение, если на экране есть поле пароля, даже скрытое. Чтобы нарушить эту логику, вы можете поместить каждое поле пароля в его собственную форму, если оно не нарушает вашу собственную логику страницы.

<input type=name >

<form>
    <input type=password >
</form>

Если у вас возникли проблемы с сохранением заполнителей, но отключением автозаполнения Chrome, я нашел этот обходной путь.

проблема

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

Приведенный выше пример по-прежнему вызывает проблему с автозаполнением, но если вы используете required="required"и некоторые CSS, вы можете копировать заполнители, и Chrome не будет подбирать теги.

Решение

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

Мне действительно не нравилось создавать скрытые поля, я думаю, что создание этого будет очень запутанным и очень быстрым.

На полях ввода, которые вы хотите остановить от автозаполнения, это будет работать. Сделайте поля доступными только для чтения и в фокусе удалите этот атрибут следующим образом

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

для этого нужно сначала удалить атрибут «только для чтения », выбрав поле, и в это время, скорее всего, вы будете заполнены собственным пользовательским вводом и остановите автозаполнение, чтобы взять на себя управление

Ранее введенные значения, кэшированные Chrome, отображаются в виде выпадающего списка выбора. Это можно отключить с помощью autocomplete = off, явно сохраненный адрес в дополнительных настройках Chrome дает всплывающее окно автозаполнения, когда поле адреса получает фокус. Это можно отключить с помощью autocomplete = "false" . Но это позволит chrome отображать кэшированные значения в выпадающем списке.

На поле ввода html следующее отключит оба.

Role="presentation" & autocomplete="off"

При выборе полей ввода для автозаполнения адреса Chrome игнорирует те поля ввода, которые не имеют предшествующего элемента html метки.

Чтобы Chrome Parser игнорировал поле ввода для всплывающего адреса автозаполнения, можно добавить скрытую кнопку или элемент управления изображением между меткой и текстовым полем. Это нарушит последовательность синтаксического разбора создания пары метка-вход для автозаполнения. Флажки игнорируются при разборе полей адреса

Chrome также учитывает атрибут for для элемента label. Может использоваться для разрыва последовательности разбора хрома.

Ну, так как у всех нас есть эта проблема, я потратил некоторое время, чтобы написать работающее расширение jQuery для этой проблемы. Google должен следовать HTML-разметке, а не мы следуем Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Просто добавьте это в файл типа /js/jquery.extends.js и включите его после jQuery. Примените его к каждому элементу формы при загрузке документа следующим образом:

$(function() {
    $('form').autoCompleteFix();
});

jsfiddle с тестами

Попробуйте следующий jQueryкод, который работал для меня.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}

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

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

Согласно сообщению об ошибке Chromium # 352347 Chrome больше не уважаетautocomplete="off|false|anythingelse" ни формы, ни входные данные.

Единственное решение, которое сработало для меня, это добавить фиктивное поле пароля :

<input type="password" class="hidden" />
<input type="password" />

Устанавливая autocompleteна offдолжен работать здесь у меня есть пример , который используется Google в поисковой странице. Я нашел это из элемента inspect.

редактировать : если offне работает, попробуйте falseили nofill. В моем случае это работает с Chrome версии 48.0

Вот грязный хак -

У вас есть ваш элемент здесь (добавив атрибут disabled):

<input type="text" name="test" id="test" disabled="disabled" />

А затем в нижней части вашей веб-страницы поместите немного JavaScript:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>

Отличное решение, основанное на webkit. Как уже упоминалось, каждый раз, когда Chrome находит поле пароля, он автоматически заполняет электронную почту. AFAIK, это независимо от автозаполнения = [что угодно].

Чтобы обойти это, измените тип ввода на текстовый и примените шрифт безопасности webkit в любой форме.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

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

Единственный способ, который работает для меня, был: (требуется jQuery)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

Я столкнулся с той же проблемой. А вот решение для отключения автозаполнения имени пользователя и пароля в Chrome (только что протестировано с Chrome)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">