Я створив веб-додаток, який використовує спадний ящик з тегами. Це чудово працює у всіх браузерах, окрім браузера Chrome (версія 21.0.1180.89).

Незважаючи на те, що обидва inputполя ТА formмають autocomplete="off"атрибут поля , Chrome наполягає на тому, щоб показати спадну історію попередніх записів для поля, яка видаляє список тегів.

ОНОВЛЕННЯ

Здається, Chrome ігнорує style="display: none;"або style="visibility: hidden;атрибути.

Ви можете змінити його на щось на кшталт:

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

На мій досвід, Chrome автозавершує лише перший <input type="password">та попередній <input>. Тому я додав:

<input style="display:none">
<input type="password" style="display:none">

Наверх <form>і справа була вирішена.

Запобігайте автоматичному заповненню імені користувача (або електронної пошти) та пароля:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Запобігати автозаповненню поля ( можливо, не працює ):

<input type="text" name="field" autocomplete="nope">

Пояснення:

autocompleteдо сих пір працює за принципом , <input>незважаючи на те autocomplete="off", але ви можете змінити offна довільну рядок, як nope.

Інші "рішення" для відключення автозаповнення поля (це не правильний спосіб зробити це, але воно працює):

1.

HTML:

<input type="password" id="some_id" autocomplete="new-password">

JS (завантаження):

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

або за допомогою jQuery:

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2.

HTML:

<form id="form"></form>

JS (завантаження):

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

або за допомогою jQuery:

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

Щоб додати більше одного поля за допомогою jQuery:

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

Працює в:

• Chrome: 49+

• Firefox: 44+

Схоже, Chrome зараз ігнорує, autocomplete="off"якщо він не міститься в <form autocomplete="off">тезі.

Сучасний підхід

Просто зробіть свій внесок readonlyі, якщо зосередити увагу, видаліть його. Це дуже простий підхід, і браузери не заповнюватимуть readonlyдані. Тому цей метод прийнятий і ніколи не буде перезаписаний майбутніми оновленнями браузера.

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

Наступна частина необов’язкова. Відповідно до цього стилю введіть так, щоб він не був схожим на readonlyвведення.

input[readonly] {
     cursor: text;
     background-color: #fff;
}

РОБОТИ ПРИКЛАД

Для надійного вирішення можна додати цей код на свою сторінку макета:

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

Chrome поважає функцію автозаповнення = вимкнено лише тоді, коли у формі є принаймні один інший елемент введення з будь-яким іншим значенням автозаповнення.

Це не буде працювати з полями паролів - вони обробляються в Chrome зовсім по-різному. Докладніші відомості див. У https://code.google.com/p/chromium/isissue/detail?id=468153 .

ОНОВЛЕННЯ: Помилка закрита як "Не виправлено" Chromium Team 11 березня 2016 року. Для повного пояснення див. Останній коментар у моєму первісно поданому звіті про помилку . TL; DR: використовуйте семантичні атрибути автозаповнення, такі як autocomplete = "new-street-address", щоб уникнути автоматичного заповнення Chrome.

Ну, трохи пізно на вечірку, але, здається, є трохи непорозумінь щодо того, як autocompleteслід і не слід працювати. Відповідно до специфікацій HTML, агент користувача (у цьому випадку Chrome) може змінювати autocomplete:

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

Агент користувача може дозволити користувачеві замінити ім'я поля автозаповнення елемента, наприклад, змінити його з "вимкнено" на "ввімкнено", щоб значення можна було запам'ятати і попередньо заповнити, незважаючи на заперечення автора сторінки, або завжди "вимкнено", ніколи не пам'ятаючи значення. Однак користувацькі агенти не повинні дозволяти користувачам тривіально переосмислювати ім'я поля автозаповнення з "вимкнено" на "увімкнено" або інші значення, оскільки для користувача є значні наслідки для безпеки, якщо всі значення завжди запам'ятовуються, незалежно від уподобань сайту.

Так, що стосується Chrome, розробники по суті сказали, "ми залишимо це користувачеві, щоб він вирішив у своїх перевагах, хочуть вони autocompleteпрацювати чи ні. Якщо ви цього не хочете, не вмикайте його у своєму браузері". .

Однак, схоже, це з моєї сторони трохи надто ревно, але це так і є. У специфікації також обговорюються можливі наслідки такого кроку для безпеки:

Ключове слово "вимкнено" вказує або на те, що вхідні дані управління є особливо чутливими (наприклад, код активації ядерної зброї); або що це значення, яке ніколи не буде використане повторно (наприклад, одноразовий ключ для входу в банк), і тому користувачеві доведеться кожного разу чітко вводити дані, замість того, щоб мати можливість покластись на UA для попереднього заповнення. цінність для нього; або що документ надає власний механізм автозаповнення і не хоче, щоб агент користувача надав значення автозаповнення.

Отож, переживши таке ж розчарування, як і всі, я знайшов рішення, яке працює для мене. Він подібний у autocomplete="false"відповіді на відповіді.

Стаття Mozilla говорить саме про цю проблему:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

У деяких випадках браузер продовжує запропонувати значення автозаповнення, навіть якщо атрибут автозаповнення встановлено на вимкнено. Така несподівана поведінка може бути досить спантеличною для розробників. Трюк, щоб дійсно змусити незавершення, - призначити атрибуту випадковий рядок

Отже, наступний код повинен працювати:

autocomplete="nope"

І так має бути кожне з наступного:

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

Я бачу проблему в тому, що агент браузера може бути досить розумним, щоб дізнатися autocompleteатрибут та застосувати його наступного разу, коли він побачить форму. Якщо це зробити так, єдиний спосіб, яким я бачу вирішити проблему, - це динамічно змінювати autocompleteзначення атрибута при створенні сторінки.

Варто зазначити, що багато браузерів ігнорують autocompleteналаштування полів для входу (ім’я користувача та пароль). Як зазначено у статті Mozilla:

З цієї причини багато сучасних браузерів не підтримують автозаповнення = "вимкнено" для полів входу.

• Якщо веб-сайт встановлює autocomplete = "off" для форми, а форма включає поля введення імені користувача та пароля, тоді браузер все одно запропонує запам'ятати це логін, і якщо користувач погодиться, браузер автоматично заповнить ці поля наступного разу, коли Користувач відвідує цю сторінку.
• Якщо сайт встановлює autocomplete = "off" для полів введення імені користувача та пароля, браузер все одно запропонує запам'ятати це логін, і якщо користувач погодиться, браузер автоматично заповнить ці поля наступного разу, коли користувач відвідає цю сторінку.

Така поведінка у Firefox (з версії 38), Google Chrome (з 34) та Internet Explorer (з версії 11).

Нарешті трохи інформації про те, належить атрибут formелементу чи inputелементу. Спеціалізація знову має відповідь:

Якщо атрибут автозаповнення пропущено, замість нього використовується значення за замовчуванням, що відповідає стану атрибута автозаповнення власника форми елемента (або "увімкнено", або "вимкнено"). Якщо власника форми немає, тоді використовується значення "увімкнено".

Тому. Нанесення його на форму має стосуватися всіх полів введення. Нанесення його на окремий елемент має стосуватися саме цього елемента (навіть якщо у формі його немає). Якщо він autocompleteвзагалі не встановлений, він за замовчуванням on.

Підсумок

Щоб вимкнути autocompleteвсю форму:

<form autocomplete="off" ...>

Або якщо вам потрібно це зробити динамічно:

<form autocomplete="random-string" ...>

Відключення autocompleteокремого елемента (незалежно від того, присутній чи ні налаштування форми)

<input autocomplete="off" ...>

Або якщо вам потрібно це зробити динамічно:

<input autocomplete="random-string" ...>

І пам’ятайте, що певні агенти користувача можуть перекрити навіть ваші найскладніші спроби відключити autocomplete.

В даний час рішенням є використання type="search". Google не застосовує автозаповнення до даних із типом пошуку.

Дивіться: https://twitter.com/Paul_Kinlan/status/596613148985171968

Оновлення 04.04.2016: Схоже, це виправлено! Дивіться http://codereview.chromium.org/1473733008

Зараз версія Chrome 34 ігнорує autocomplete=off, дивіться це .

Багато дискусій щодо того, добре це чи погано? Які ваші погляди?

Браузер не піклується про автоматичне заповнення = вимкнено автоматичну функцію або навіть заповнює облікові дані неправильним текстовим полем?

Я виправив його, встановивши поле пароля лише для читання та активував його, коли користувач натискає на нього або використовує клавішу вкладки до цього поля.

виправити автозаповнення браузера: лише читати та встановлювати фокус у фокусі (натисканням миші та вкладкою через поля)

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

Оновлення: мобільний Safari встановлює курсор у полі, але не показує віртуальну клавіатуру. New Fix працює як раніше, але обробляє віртуальну клавіатуру:

<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, коли є поля паролів у однаковій формі. Я думаю, браузер шукає поле для пароля, щоб вставити збережені облікові дані. Потім він автоматично заповнює ім'я користувача у найближче текстове поле для введення тексту, яке з’являється перед полем пароля в DOM (просто здогадуючись завдяки спостереженню). Оскільки веб-переглядач - це останній екземпляр, і ви не можете ним керувати, іноді навіть автозаповнення = вимкнення не завадить заповнити облікові дані в неправильні поля, але не в поле користувача або псевдоніма.

Можна використовувати autocomplete="new-password"

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

Працює в:

• Хром: 53, 54, 55
• Firefox: 48, 49, 50

TL; DR: Скажіть Chrome, що це новий введення пароля, і він не надасть старі як автоматичне заповнення пропозицій:

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

autocomplete="off" не працює завдяки дизайнерському рішенню - багато досліджень показують, що користувачам потрібно набагато довше і складніше зламати паролі, якщо вони можуть зберігати їх у браузері чи менеджері паролів.

Специфікація для autocomplete цього змінилася , і тепер підтримує різні значення для полегшення автоматичного заповнення форм входу:

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

Якщо ви не надаєте цей Chrome, він все ще намагається здогадатися, а коли він робить, він ігнорує autocomplete="off".

Рішення полягає в тому, що autocompleteзначення також існують для форм скидання пароля:

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

Ви можете використовувати цей autocomplete="new-password"прапор, щоб сказати Chrome не вгадувати пароль, навіть якщо він зберігається для цього сайту.

Chrome також може керувати паролями для веб-сайтів безпосередньо за допомогою API облікових даних , що є стандартом і, мабуть, матиме універсальну підтримку з часом.

Я вирішив нескінченну боротьбу з Google Chrome із використанням випадкових символів. Коли ви завжди візуалізуєте автозаповнення випадковим рядком, він ніколи нічого не запам’ятає.

<input name="name" type="text" autocomplete="rutjfkde">

Сподіваємось, що це допоможе іншим людям.

Autocomplete="Off" більше не працює.

Спробуйте використовувати, наприклад, випадковий рядок, а не "Off", наприкладAutocomplete="NoAutocomplete"

Я сподіваюся, що це допомагає.

Побачений хром ігнорує autocomplete="off", я вирішую це дурним способом, який використовує "фальшивий ввід", щоб обдурити хром, щоб заповнити його замість заповнення "справжнього".

Приклад:

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chrome заповнить "фальшивий ввід", а після надсилання сервер прийме значення "реального введення".

Я публікую цю відповідь, щоб принести оновлене рішення цієї проблеми. Наразі я використовую Chrome 49 і не даю відповіді для цього. Я також шукаю рішення, що працює з іншими браузерами та попередніми версіями.

Покладіть цей код на початок форми

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

Потім для свого реального пароля використовуйте поле

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

Прокоментуйте цю відповідь, якщо вона більше не працює або якщо у вас виникли проблеми з іншим браузером або версією.

Затверджено:

• Хром: 49
• Firefox: 44, 45
• Край: 25
• Internet Explorer: 11

тому, хто шукає рішення в цьому, я нарешті з’ясував це.

Chrome підкоряється автозаповненню = "вимкнено", якщо сторінка є сторінкою HTML5 (я використовував XHTML).

Я перетворив свою сторінку в HTML5, і проблема пішла (facepalm).

Змініть атрибут типу введення на type="search".

Google не застосовує автоматичне заповнення до даних із типом пошуку.

До цього минулого тижня, як показано, два рішення нижче працювали для Chrome, IE та Firefox. Але з випуском Chrome версії 48 (і досі в 49) вони більше не працюють:

1. Далі вгорі форми:

<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

2. У елементі введення пароля:

   autocomplete = "вимкнено"

Отже, щоб швидко виправити це, спершу я спробував використати основний хак для початкового встановлення елемента введення пароля на вимкнено, а потім застосував setTimeout у функції готового документа, щоб знову його включити.

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

Але це здалося таким божевільним, і я ще трохи шукав і знайшов відповідь @tibalts у відключенні Chrome Autofill . Його відповідь полягає у використанні autocomplete = "new-password" у введенні паролів, і, здається, це працює у всіх браузерах (на цьому етапі я зберігав своє виправлення №1 вище).

Ось посилання в дискусії для розробників Google Chrome: https://code.google.com/p/chromium/isissue/detail?id=370363#c7

autocomplete=off в основному ігнорується в сучасних браузерах - насамперед через менеджерів паролів тощо.

Ви можете спробувати додати це, але autocomplete="new-password"воно не підтримується всіма браузерами, але воно працює на деяких

autocomplete="off"зазвичай працює, але не завжди. Це залежить від nameполя введення. Такі імена, як "адреса", "електронна пошта", "ім'я", будуть автоматично заповнені (браузери вважають, що вони допомагають користувачам), коли поля типу "код", "прикріпити" - не заповняться автоматично (якщо autocomplete="off"встановлено)

Мої проблеми полягали в тому, що автозаповнення возилося з помічником адреси Google

Я це виправив, перейменувавши його

з

<input type="text" name="address" autocomplete="off">

до

<input type="text" name="the_address" autocomplete="off">

Випробуваний у хромі 71.

Замість autocomplete = "off" використовуйте autocomplete = "false" ;)

з: https://stackoverflow.com/a/29582380/75799

Немає поняття, чому це працювало в моєму випадку, але я застосував хром, autocomplete="none"і Chrome перестав пропонувати адреси для мого текстового поля.

Як і в Chrome 42, жодне з рішень / злому в цій темі (станом на 2015-05-21T12:50:23+00:00) не працює для вимкнення автозаповнення для окремого поля або всієї форми.

РЕДАКТУВАННЯ: Я виявив, що вам потрібно лише вставити у форму лише одне фіктивне поле електронної пошти (ви можете приховати його display: none) перед іншими полями, щоб запобігти автоматичному заповненню. Я припускаю, що хром зберігає якусь підпис форми з кожним автозаповненим полем і включаючи інше поле електронної пошти пошкоджує цей підпис і запобігає автоматичному заповненню.

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

Хороша новина полягає в тому, що оскільки "підпис форми" пошкоджений цим, жодне з полів не заповнюється автоматично, тому для очищення підроблених полів перед подачею жоден JS не потрібен.

Стара відповідь:

Єдине, що я виявив все ще життєздатним - це вставити два манекенні поля типу електронної пошти та пароля перед реальними полями. Ви можете встановити їх, щоб display: noneсховати їх (це недостатньо розумно, щоб ігнорувати ці поля):

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

На жаль, поля повинні бути в межах вашої форми (інакше обидва набори входів заповнено автоматично). Отже, щоб справжнє ігнорування підроблених полів вам знадобилося, щоб JS запустив форму подання, щоб очистити їх:

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

Зверніть увагу зверху, що очищення значення за допомогою Javascript працює над заміною автозаповнення. Отже, якщо втратити правильну поведінку з відключеним JS є прийнятним, ви можете спростити все це за допомогою автоматичного заповнення JS "polyfill" для Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);

У мене була подібна проблема, коли поле введення брало або ім’я, або електронну пошту. Я встановив автозаповнення = "вимкнено", але Chrome все ж примушував пропозиції. Виявилося, це тому, що в тексті заповнювача в ньому були слова "ім'я" та "електронна пошта".

Наприклад

<input type="text" placeholder="name or email" autocomplete="off" />

Я обійшов його, ввівши простір нульової ширини у слова в заповнювачі. Немає більше автозаповнення Chrome.

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

У Chrome 48+ використовуйте це рішення:

1. Поставте підроблені поля перед реальними полями:

   <form autocomplete="off">
     <input name="fake_email"    class="visually-hidden" type="text">
     <input name="fake_password" class="visually-hidden" type="password">
   
     <input autocomplete="off" name="email"    type="text">
     <input autocomplete="off" name="password" type="password">
   </form>

2. Сховати підроблені поля:

   .visually-hidden {
     margin: -1px;
     padding: 0;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     clip: rect(0, 0, 0, 0);
     position: absolute;
   }

3. Ти зробив це!

Також це буде працювати для старих версій.

Після того, як хром v. 34, який заходив autocomplete="off"в <form>тег Байдуже `роботи

Я вніс зміни, щоб уникнути цієї дратівливої ​​поведінки:

1. Видаліть nameі idвведіть пароль
2. Поставте клас на вході (напр.: passwordInput)

(Поки Chrome не вкладає збережений пароль на вхід, але форма тепер зламана)

Нарешті, щоб змусити форму працювати, покладіть цей код на запуск, коли користувач натисне кнопку "Надіслати" або коли потрібно запустити подання форми:

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

У моєму випадку я звик id="password" name="password"вводити пароль, тож я повертав їх ще до того, як запустити подання.

Спробувавши всі рішення, ось що, здається, працює для хромованої версії: 45, з формою з полем пароля:

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });

Щойно я оновив Chrome 49 і рішення Diogo Cid більше не працює.

Я зробив інше рішення, приховуючи та видаляючи поля під час виконання після завантаження сторінки.

Зараз Chrome ігнорує оригінальне рішення, застосовуючи облікові дані до першого відображеного type="password" поля та його попереднього type="text"поля, тому я приховав обидва поля за допомогою CSS visibility: hidden;

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

Я знаю, що це може здатися не дуже елегантним, але це працює.

я знайшов це рішення найбільш підходящим:

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

Він повинен бути завантажений після готовності дому або після надання форми.

Хоча я погоджуюся, що автоматичне заповнення повинно бути вибором користувача, є випадки, коли Chrome надто ревно ставиться до нього (можуть бути і інші браузери). Наприклад, поле пароля з іншим іменем все ще автоматично заповнюється збереженим паролем, а попереднє поле заповнюється іменем користувача. Це особливо добре, якщо форма є формою управління користувачем для веб-програми, і ви не хочете, щоб автозаповнення заповнювало її власними обліковими записами.

Chrome повністю ігнорує функцію autocomplete = "off" зараз. Хоча хаки JS цілком можуть спрацювати, я знайшов простий спосіб, який працює під час написання:

Встановіть значення поля пароля на контрольний символ 8 ( "\x08"в PHP або в HTML). Це зупиняє автоматичне заповнення поля Chrome, оскільки воно має значення, але фактичне значення не вводиться, оскільки це символ зворотної області.

Так, це все-таки хак, але це працює для мене. YMMV.