Autocomplete= off not working in chrome
We are working on one web application in that one payment page is there.
In that we have two Text box one is for Credit Card Number and second one is for Verification Code and it type=”Password”.
Now problem is when page is load in google-chrome it found type=”Password” it load Save email id in Credit Card Textbox and password in Verification Code.
Now try to solve this issue i was try out something like below.
<form autocomplete="off">
<asp:textbox autocomplete="off">
This above try is not work for me. i was googling it but by luck it’s not work for me.
Chrome игнорирует autocomplete = “off”
Что ж, немного опоздал на вечеринку, но, похоже, есть небольшое недоразумение относительно того, как autocompleteдолжно и как не должно работать. Согласно спецификациям HTML, пользовательский агент (в данном случае Chrome) может переопределить autocomplete:
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
A user agent may allow the user to override an element’s autofill field name, e.g. to change it from “off” to “on” to allow values to be remembered and prefilled despite the page author’s objections, or to always “off”, never remembering values. However, user agents should not allow users to trivially override the autofill field name from “off” to “on” or other values, as there are significant security implications for the user if all values are always remembered, regardless of the site’s preferences.
Так что в случае с Chrome разработчики, по сути, заявили: «Мы предоставим пользователю решать в своих предпочтениях, хотят ли они autocompleteработать или нет. Если вы этого не хотите, не включайте его в своем браузере». .
Однако, похоже, это немного с их стороны, на мой вкус, но так оно и есть. В спецификации также обсуждаются потенциальные последствия такого шага для безопасности:
The “off” keyword indicates either that the control’s input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
Так что, испытав такое же разочарование, как и все остальные, я нашел решение, которое работает для меня. Это похоже на autocomplete="false"ответы.
Статья Mozilla посвящена именно этой проблеме:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
In some case, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really force the no-completion is to assign a random string to the attribute
Итак, следующий код должен работать:
autocomplete="nope"
И так должно быть каждое из следующего:
autocomplete="false"
autocomplete="foo"
autocomplete="bar"
Проблема, которую я вижу, заключается в том, что агент браузера может быть достаточно умен, чтобы изучить autocompleteатрибут и применить его в следующий раз, когда он увидит форму. Если это произойдет, то единственный способ обойти проблему, который я вижу, – это динамическое изменение autocompleteзначения атрибута при создании страницы.
Стоит упомянуть, что многие браузеры игнорируют autocompleteнастройки полей входа (имя пользователя и пароль). Как говорится в статье Mozilla:
For this reason, many modern browsers do not support autocomplete=”off” for login fields.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
Наконец, немного информации о том, принадлежит ли атрибут formэлементу или inputэлементу. В спецификации снова есть ответ:
If the autocomplete attribute is omitted, the default value corresponding to the state of the element’s form owner’s autocomplete attribute is used instead (either “on” or “off”). If there is no form owner, then the value “on” is used.
Так. Помещение его в форму должно применяться ко всем полям ввода. Размещение его на отдельном элементе должно применяться только к этому элементу (даже если его нет в форме). Если autocompleteне задан вообще, по умолчанию используется on.
Резюме
Чтобы отключить autocompleteвсю форму:
<form autocomplete="off" ...>
Или, если вам нужно сделать это динамически:
<form autocomplete="random-string" ...>
Чтобы отключить autocompleteдля отдельного элемента (независимо от того, присутствует ли настройка формы)
<input autocomplete="off" ...>
Или, если вам нужно сделать это динамически:
<input autocomplete="random-string" ...>
И помните, что определенные пользовательские агенты могут отменять даже ваши самые трудные попытки отключить autocomplete.
Атрибут autocomplete — html — дока
Атрибут, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля.
Создадим форму, в которую пользователь будет сам вводить имя, а при заполнении поля e-mail сможет выбрать адрес почты из предложенных браузером вариантов:
<form action=""> <div> <label for="name">Введите имя</label> <input id="name" type="text"> </div> <div> <label for="email">Электронная почта</label> <input id="email" type="email" autocomplete="on"> </div> <button type="submit">Отправить</button></form><formaction=""><div><labelfor="name">Введите имя</label><inputid="name"type="text"></div><div><labelfor="email">Электронная почта</label><inputid="email"type="email"autocomplete="on"></div><buttontype="submit">Отправить</button></form>Когда вы заполняете формы, браузер сохраняет те или иные данные — логины, пароли, адреса и e-mail. При заполнении очередной формы браузер идёт в список сохранённой информации, выуживает оттуда данные, которые требуются для этой формы, и вставляет в соответствующие поля.
<form autocomplete="on">...</form><formautocomplete="on">...</form>Атрибут autocomplete пишется внутри открывающего тега, и в кавычках прописывается его значение.
Кроме элемента <form>, вы можете указать этот атрибут для любого поля, которое требует ввода данных — <input>, принимающий на вход текст или число, <select> или <textarea>.
В зависимости от значения атрибута autocomplete, будут подставляться данные разного типа. Ниже приведены возможные значения.
name— полное имя.given-name— имя (в странах, где дают два имени, это первое имя).additional-name— второе имя (для стран, где дают два имени).family-name— фамилия.honorific-prefix— звание или префикс для обращения, например, «Mrs.», «Mr.», «Miss», «Ms.», «Dr.», «Mlle.».honorific-suffix— окончание имени, например, «Jr.», «B.Sc.», «PhD.», «IV», «мл.».
💡 Автозаполнение может быть отключено в настройках браузера.
💡 Если автозаполнение не отключено в браузере и атрибут autocomplete не прописан в теге, то его значение по умолчанию принимается за on.
💡 Если задать autocomplete="on" для <form>, то это сработает для всех вложенных элементов формы.
🛠 Значение атрибута может перебиваться значениями, прописанными в дочерних элементах.
<form action="" autocomplete="off"> <div> <label for="name">Введите имя</label> <input id="name" type="text"> </div> <div> <label for="email">Электронная почта</label> <input id="email" type="email" autocomplete="on"> </div> <button type="submit">Отправить</button></form><formaction=""autocomplete="off"><div><labelfor="name">Введите имя</label><inputid="name"type="text"></div><div><labelfor="email">Электронная почта</label><inputid="email"type="email"autocomplete="on"></div><buttontype="submit">Отправить</button></form>Первый <input> унаследует значение от родительского элемента <form> и не будет заполняться автоматически. Для второго <input> уже будет работать автозаполнение, поскольку для него прописан autocomplete="on".
🛠 Для правильного автозаполнения желательно, чтобы:
🛠 Если пользователь должен ввести имя, рекомендуется использовать значение autocomplete="name" вместо разделения на поля с отдельными частями имени, потому что имена могут иметь совершенно разную структуру.
🛠 По той же причине рекомендуется использовать значение autocomplete="cc-name", если нужно вводить данные банковской карты.
🛠 При создании нового аккаунта или изменении пароля следует использовать autocomplete="new-password" для полей «Введите новый пароль» и «Подтвердите новый пароль», но не для поля «Введите текущий пароль». Это сделано, чтобы случайно не вписать существующий пароль, а также предложить помощь в создании безопасного пароля.
Как отключить автозаполнение форм с помощью html 5?
Можно отключить автозаполнение, если в момент фокусировки в поле поменять у поля значение name на произвольное. А когда пользователь выходит из input, то поменять значение name обратно. В этом случае браузер Хром не выводит подсказок, т.к. каждый раз значение name новое.
Необходимо подключать jquery, а ниже подключить сам скрипт.
Исходник (взял отсюда только код, который генерит значение name) https://github.com/terrylinooo/jquery.disableAutoFill
Что получилось в итоге:
Это сама форма, показываю кусок формы, с полями ввода, для которых отключаю подсказки хрома. Оба инпута имеют класс “only-ru”:
<form ..>
<input class="form-control city1 only-ru" type="text" name="city1" id="city1" placeholder="откуда" value="" autocomplete="off" >
<input class="form-control city2 only-ru" type="text" name="city2" id="city2" placeholder="куда" value="" autocomplete="off" >
...
</form>Сам скрипт, который при фокусе генерит произвольное значение для name, а при выходе из фокуса – возвращает значение name обратно, как мне нужно. Можете его улучить, сделать более универсальным:
//поменять name при фокусе
$('.only-ru').on("focus", function(){
var realFields = [];
var realFieldsMapper = {};
$(this).each(function(i) {
realFields[i] = $(this).attr('name');
if(realFieldsMapper[realFields[i]]) {
$(this).attr('name', realFieldsMapper[realFields[i]]);
} else {
var randomName = Math.random().toString(36).replace(/[^a-z] /g, '');
$(this).attr('name', randomName);
realFieldsMapper[realFields[i]] = randomName;
}
});
});
//поменять name обратно
$(document).mouseup(function (e){
var div1 = $("#city1"), div2 = $("#city2");
if (!div1.is(e.target)) $("input#city1").attr('name', 'city1');
if (!div2.is(e.target)) $("input#city2").attr('name', 'city2');
});
