Отключение автозаполнения Chrome
У меня были проблемы с поведением автозаполнения Chrome в нескольких формах.
Все поля в форме имеют очень общие и точные имена, такие как "электронная почта", "имя" или "пароль", и они также имеют autocomplete="off" задавать.
Флаг автозаполнения успешно отключил поведение автозаполнения, при котором выпадающий список значений появляется, когда вы начинаете печатать, но не изменял значения, в которых Chrome автоматически заполняет поля.
Это будет нормально, за исключением того, что Chrome неправильно заполняет поля ввода, например, заполняет поля ввода телефона адресом электронной почты. Клиенты жаловались на это, поэтому подтверждено, что это происходит во многих случаях, а не как какой-то результат того, что я сделал локально на моей машине.
Единственное текущее решение, о котором я могу подумать, - это динамически генерировать пользовательские имена входных данных, а затем извлекать значения из серверной части, но это кажется довольно хакерским способом решения этой проблемы. Существуют ли какие-либо теги или причуды, которые изменяют поведение автозаполнения, которые могут быть использованы для исправления этого?
69 ответов
Для новых версий Chrome вы можете просто поставить autocomplete="new-password" в поле вашего пароля и все. Я проверил, отлично работает.
Получил этот совет от разработчика Chrome в этом обсуждении: https://bugs.chromium.org/p/chromium/issues/detail?id=370363
PS не забудьте использовать уникальные имена для разных полей, чтобы предотвратить автозаполнение.
Я только что обнаружил, что если у вас есть запомненное имя пользователя и пароль для сайта, текущая версия Chrome автоматически заполнит ваше имя пользователя / адрес электронной почты в поле перед любым type=password поле. Неважно, как называется это поле - просто предполагается, что это поле перед тем, как пароль будет вашим именем пользователя.
Старое решение
Просто используйте <form autocomplete="off"> и это предотвращает предварительное заполнение пароля, а также эвристическое заполнение полей на основе предположений, которые может сделать браузер (которые часто ошибочны). В отличие от использования <input autocomplete="off"> что, кажется, в значительной степени игнорируется автозаполнением пароля (то есть в Chrome, Firefox действительно подчиняется).
Обновленное решение
Chrome теперь игнорирует <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 недавно снова начал заполнять поле "Электронная почта" - так что я удвоил значение и добавил больше поддельных полей непосредственно перед полем "Электронная почта", и это исправило его., Удаление первой или второй партии полей приводит к неправильному переусердствующему автозаполнению.
После нескольких месяцев борьбы я обнаружил, что решение намного проще, чем вы можете себе представить:
Вместо autocomplete="off" использование autocomplete="false";)
Это так просто, и это работает как шарм в Google Chrome!
Sometimes even autocomplete=off won't prevent filling in credentials into wrong fields.
A workaround is to disable browser autofill using readonly-mode and set writable on focus:
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
focus event occurs at mouse clicks and tabbing through fields.
Обновить:
Mobile Safari sets cursor in the field, but does not show virtual keyboard. This new workaround works like before, but handles virtual keyboard:
<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
Объяснение: Браузер автоматически вводит учетные данные в неправильное текстовое поле?
filling the inputs incorrectly, for example filling the phone input with an email address
Иногда я замечаю это странное поведение в Chrome и Safari, когда поля пароля имеют одинаковую форму. Я предполагаю, что браузер ищет поле пароля для вставки сохраненных учетных данных. Затем он автоматически заполняет имя пользователя в ближайшем текстовом поле ввода, которое появляется перед полем пароля в DOM (просто догадываясь из-за наблюдения). Поскольку браузер является последним экземпляром, и вы не можете его контролировать,
Это исправление только для чтения сработало для меня.
Если вы используете функцию окна поиска, попробуйте установить type приписывать search следующее:
<input type="search" autocomplete="off" />
Это работает для меня на Chrome v48 и выглядит как законная разметка:
Я не знаю почему, но это помогло и сработало для меня.
<input type="password" name="pwd" autocomplete="new-password">
Понятия не имею почему, но autocompelete="new-password" отключает автозаполнение. Он работал в последней версии 49.0.2623.112 Chrome.
Попробуй это. Я знаю, что вопрос несколько устарел, но это другой подход к проблеме.
Я также заметил, что проблема возникает чуть выше 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="" />
Надеюсь, это кому-нибудь поможет.
Для меня просто
<form autocomplete="off" role="presentation">
Сделал это.
Протестировано на нескольких версиях, последняя попытка была на 56.0.2924.87
Это так просто и сложно:)
Google Chrome в основном ищет каждый первый видимый элемент пароля внутри <form>, <body> а также <iframe> теги, чтобы включить автозаполнение для них, поэтому, чтобы отключить это, вам нужно добавить элемент-заглушку пароля следующим образом:
если ваш элемент пароля внутри
<form>тег, который вы должны поместить фиктивный элемент в качестве первого элемента в вашей форме сразу после<form>открыть тегесли ваш элемент пароля не внутри
<form>тег поместит фиктивный элемент в качестве первого элемента на HTML-странице сразу после<body>открыть тег
Вам нужно скрыть фиктивный элемент без использования CSS
display:noneтак что в основном используйте следующее как фиктивный элемент пароля.<input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
Используйте 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;
}
Ранее введенные значения, кэшированные Chrome, отображаются в виде выпадающего списка выбора. Это можно отключить с помощью autocomplete = off, явно сохраненный адрес в дополнительных настройках Chrome дает всплывающее окно автозаполнения, когда поле адреса получает фокус. Это можно отключить с помощью autocomplete="false".. Но это позволит chrome отображать кэшированные значения в выпадающем списке.
На поле ввода html следующее отключит оба.
Role="presentation" & autocomplete="off"
При выборе полей ввода для автозаполнения адреса Chrome игнорирует те поля ввода, которые не имеют предшествующего элемента html метки.
Чтобы гарантировать, что Chrome Parser игнорирует поле ввода для всплывающего окна автозаполнения, можно добавить скрытую кнопку или элемент управления изображением между меткой и текстовым полем. Это нарушит последовательность разбора chrome для создания пары метка-вход для автозаполнения. Флажки игнорируются при разборе полей адреса
Chrome также учитывает атрибут "for" элемента label. Может использоваться для разрыва последовательности разбора хрома.
Вот мои предложенные решения, так как 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-заметку, чтобы ваши другие разработчики не удалили ее! Также убедитесь, что имя скрытого ввода актуально.
В некоторых случаях браузер будет продолжать предлагать значения автозаполнения, даже если атрибут автозаполнения отключен. Такое неожиданное поведение может быть довольно загадочным для разработчиков. Хитрость в том, чтобы по-настоящему форсировать отсутствие автозаполнения, состоит в том, чтобы присвоить атрибуту случайную строку, например:
autocomplete="nope"
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
добавление атрибута readonly к тегу вместе с удалением события onfocus устраняет проблему
Я обнаружил, что добавление этого в форму не позволяет 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
Действительно разочаровывает, что Chrome решил, что он лучше, чем разработчик, знает, когда нужно автозаполнение. Имеет реальное чувство Microsoft к этому.
Для комбо паролей пользователей это легко решить. Эвристика Chrome ищет шаблон:
<input type="text">
с последующим:
<input type="password">
Просто прервите этот процесс, аннулировав это:
<input type="text">
<input type="text" onfocus="this.type='password'">
В 2016 году Google Chrome начал игнорировать autocomplete=off хотя это в W3C. Ответ они разместили:
Сложность здесь заключается в том, что где-то на протяжении всего пути web autocomplete=off становится значением по умолчанию для многих полей формы, без какой-либо реальной мысли о том, было ли это хорошо для пользователей. Это не означает, что есть не очень допустимые случаи, когда вы не хотите, чтобы данные автозаполнения браузера (например, в системах CRM), но в целом мы рассматриваем их как случаи меньшинства. И в результате мы начали игнорировать autocomplete=off для данных автозаполнения Chrome.
Что по сути говорит: мы лучше знаем, что хочет пользователь.
Я не видел проблем, связанных с автозаполнением, во всех моих приложениях B2B, но только с вводом типа пароля.
Заполняется автозаполнение, если на экране есть поле пароля, даже скрытое. Чтобы нарушить эту логику, вы можете поместить каждое поле пароля в его собственную форму, если оно не нарушает вашу логику страницы.
<input type=name >
<form>
<input type=password >
</form>
Майк Нельсонс предоставил решение не работает для меня в Chrome 50.0.2661.102 m. Простое добавление элемента ввода того же типа с отображением: ни один из них больше не отключает автозаполнение собственного браузера. Теперь необходимо продублировать атрибут имени поля ввода, для которого вы хотите отключить автозаполнение.
Кроме того, чтобы избежать дублирования поля ввода, когда они находятся внутри элемента формы, вы должны поместить отключенный элемент, который не отображается. Это предотвратит отправку этого элемента как часть действия формы.
<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
Согласно сообщению об ошибке Chromium # 352347 Chrome больше не уважает autocomplete="off|false|anythingelse", ни на формах, ни на входах.
Единственное решение, которое сработало для меня, это добавить фиктивное поле пароля:
<input type="password" class="hidden" />
<input type="password" />
Если у вас есть проблемы с сохранением заполнителей, но отключением автозаполнения 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;
}
Ну, так как у всех нас есть эта проблема, я потратил некоторое время, чтобы написать работающее расширение 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();
});
Мне действительно не нравилось создавать скрытые поля, я думаю, что создание этого будет очень запутанным и очень быстрым.
На полях ввода, которые вы хотите отключить от автозаполнения, это будет работать. Сделайте поля доступными только для чтения и в фокусе удалите этот атрибут следующим образом
<input readonly onfocus="this.removeAttribute('readonly');" type="text">
для этого нужно сначала удалить атрибут "только для чтения ", выбрав поле, и в это время, скорее всего, вы будете заполнены собственным пользовательским вводом и остановите автозаполнение для принятия
Есть две части к этому. Chrome и другие браузеры запомнят ранее введенные значения для имен полей и предоставят пользователю список автозаполнения на этой основе (в частности, ввод типа пароля никогда не запоминается таким образом по довольно очевидным причинам). Можете добавить autocomplete="off" чтобы предотвратить это на такие вещи, как ваше поле электронной почты.
Тем не менее, у вас есть пароли. Большинство браузеров имеют свои собственные встроенные реализации, и есть также много сторонних утилит, которые предоставляют эту функциональность. Это, вы не можете остановиться. Это пользователь, делающий свой выбор, чтобы сохранить эту информацию для автоматического заполнения позже, и полностью выходит за рамки и сферы влияния вашего приложения.
Я наконец-то добился успеха, используя textarea, Для поля пароля есть обработчик события, который заменяет каждый символ, набранный на "•".
Вот грязный хак -
У вас есть ваш элемент здесь (добавив атрибут disabled):
<input type="text" name="test" id="test" disabled="disabled" />
А затем в нижней части вашей веб-страницы поместите немного JavaScript:
<script>
setTimeout(function(){
document.getElementById('test').removeAttribute("disabled");
},100);
</script>
Попробуйте следующее jQuery код, который работал для меня.
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
Отличное решение, основанное на webkit. Как уже упоминалось, каждый раз, когда Chrome находит поле пароля, он автоматически заполняет электронную почту. AFAIK, это независимо от автозаполнения = [что угодно].
Чтобы обойти это, измените тип ввода на текстовый и примените защитный шрифт webkit в любой форме.
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
Из того, что я вижу, это, по крайней мере, так же безопасно, как ввод типа = пароль, оно защищено от копирования и вставки. Однако он уязвим, удаляя стиль, который удаляет звездочки. Конечно, тип ввода = пароль может быть легко изменен на тип ввода = текст в консоли, чтобы показать любые автозаполненные пароли, так что на самом деле это почти то же самое.
Установив autocomplete в off должен работать здесь у меня есть пример, который используется Google на странице поиска. Я нашел это из элемента inspect.
редактировать: в случае off не работает, попробуйте false или же nofill, В моем случае это работает с Chrome версии 48.0
Я столкнулся с той же проблемой. А вот решение для отключения автозаполнения имени пользователя и пароля в 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">