Я стикався з проблемами хронічної поведінки автозаповнення в декількох формах.

Усі поля у формі мають дуже поширені та точні імена, наприклад "електронна пошта", "ім'я" або "пароль", і вони також autocomplete="off"встановлені.

Прапор автозаповнення успішно відключив поведінку автозаповнення, коли спадне значення з’являється під час введення тексту, але не змінило значення, якими Chrome автоматично заповнює поля.

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

Єдине поточне рішення, про яке я можу придумати, - це динамічно генерувати власні імена введення, а потім витягувати значення в бекенде, але це здається досить хитрим способом вирішення цієї проблеми. Чи є теги чи примхи, які змінюють поведінку автозаповнення, які могли б бути використані для виправлення цього?

Для нових версій Chrome ви можете просто ввести autocomplete="new-password"поле свого пароля, і все. Я це перевірив, працює чудово.

Отримайте цю пораду від розробника Chrome у цій дискусії: https://bugs.chromium.org/p/chromium/isissue/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 це виконує).

Оновлене рішення

Зараз 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 знову почав попередньо заповнювати моє поле "Електронна пошта" - тож я подвоївся і встав більше підроблених полів перед полем "Електронна пошта", і це виправило . Видалення або першого, або другого лоту полів повертається до неправильного надмірного заповнення.

Оновлення березня 2020 року

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

У коментарях нижче ви знайдете кілька підказок. Один, що тільки що додав @anilyeni, можливо, варто ще розглянути:

Як я помітив, autocomplete="off"працює на Chrome 80, якщо в ньому менше 3 елементів <form>. Я не знаю, що це за логіка чи де пов'язана документація про неї.

Також ця версія від @dubrox може бути доречною, хоча я її не перевіряв:

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

Оновити КВІТЕНЬ 2020

Особливе значення хрому для цього атрибута виконує цю роботу: (перевірено на вході - але не мною) autocomplete="chrome-off"

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

Замість autocomplete="off"використання autocomplete="false";)

Так просто, і це працює як шарм і в Google Chrome!

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

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

Встановіть його на рівні форми, а потім для входів, які ви бажаєте відключити, встановіть якесь недійсне значення, наприклад, "жодне":

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

Іноді навіть autocomplete=offне завадить заповнити облікові дані в неправильні поля.

Вирішення проблеми полягає в тому, щоб вимкнути автоматичне заповнення браузера в режимі читання та встановити фокус, що можна записати:

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

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

<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 : диск без використання type = пароль .

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/isissue/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 м. Просто додавання вхідного елемента одного типу з дисплеєм: жоден набір більше не вимикає автоматичне завершення власного веб-переглядача. Тепер потрібно дублювати атрибут імені поля введення, яке потрібно вимкнути автоматичним заповненням.

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

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

У 2016 році Google Chrome почав ігнорувати, autocomplete=offхоча він є в W3C. Відповідь, яку вони опублікували :

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

Що по суті говорить: ми краще знаємо, чого хоче користувач.

Вони відкрили ще одну помилку для публікації дійсних випадків використання, коли потрібне автозавершення = вимкнено

Я не бачив проблем, пов’язаних із автозаповненням, через усі мої програми B2B, але тільки з введенням типу пароля.

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

<input type=name >

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

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

Проблема

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">

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

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

У полі введення html наступне відключить обидва.

Role="presentation" & autocomplete="off"

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

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

Chrome також розглядає атрибут "для" на елементі мітки. Його можна використовувати для порушення послідовності розбору хрому.

Оскільки у нас є ця проблема, я вклав деякий час, щоб написати робоче розширення jQuery для цього випуску. Google повинен дотримуватися розмітки html, а не ми

(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 використовує на сторінці пошуку. Я виявив це у елемента перевірки.

редагувати : Якщо offне працює, спробуйте falseабо nofill. У моєму випадку він працює з хромованою версією 48.0

Ось брудний злом -

Ви маєте тут свій елемент (додаючи відключений атрибут):

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

А потім внизу вашої веб-сторінки поставте JavaScript:

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

Різне рішення, засноване на вебкітах. Як уже згадувалося, у будь-який час 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">