Как отключить автозаполнение в браузере в поле веб-формы / теге ввода?

Firefox 30 игнорирует autocomplete = "off" для паролей, предпочитая вместо этого запрашивать пользователя, следует ли хранить пароль на клиенте. Обратите внимание на следующий комментарий от 5 мая 2014 г .:

• The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
• We are the third browser to implement this change, after IE and Chrome.

Согласно документации Сеть разработчиков Mozilla, атрибут элемента Boolean формы autocomplete предотвращает кэширование данных формы в старых браузерах.

<input type = "text" name = "foo" autocomplete = "off" />

Используйте нестандартные имя и идентификатор для полей, поэтому вместо «name» используйте «name_». Тогда браузеры не будут рассматривать его как поле имени. Самое приятное в этом то, что вы можете сделать это с некоторыми, но не со всеми полями, и он будет автоматически заполнять некоторые, но не все поля.

<form name = "form1" id = "form1" method = "post" 
      autocomplete = "off" action = "http://www.example.com/form.cgi">

Это будет работать в Internet Explorer и Mozilla FireFox, недостатком является то, что это не стандарт XHTML.

Просто установите autocomplete = "off". Для этого есть очень веская причина: вы хотите предоставить свою собственную функцию автозаполнения!

По родственной или совершенно противоположной ноте -

"If you're the user of the aforementioned form and want to re-enable the autocomplete functionality, use the 'remember password' bookmarklet from this bookmarklets page. It removes all autocomplete = "off" attributes from all forms on the page. Keep fighting the good fight!"

Мы действительно использовали идею sasb для одного сайта. Это было веб-приложение с медицинским программным обеспечением для работы в кабинете врача. Однако многие из наших клиентов были хирургами, которые использовали множество различных рабочих станций, в том числе полуобщественные терминалы. Таким образом, они хотели убедиться, что врач, который не понимает значения автоматически сохраненных паролей или не обращает внимания, не может случайно оставить свои данные для входа в легко доступными. Конечно, это было до идеи приватного просмотра, которая начала появляться в IE8, FF3.1 и т. д. Даже в этом случае многие врачи вынуждены использовать старые школьные браузеры в больницах с ИТ, которые не изменятся.

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

В дополнение к настройке autocomplete=off, вы также можете настроить случайным образом имена полей формы по коду, который генерирует страницу, возможно, добавив в конец имен строку, специфичную для сеанса.

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

Как говорили другие, ответ - autocomplete = "off"

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

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

Особенно важно отключить его в полях для кодов безопасности кредитных карт. Как утверждает эта страница:

"Never store the security code ... its value depends on the presumption that the only way to supply it is to read it from the physical credit card, proving that the person supplying it actually holds the card."

Проблема в том, что если это общедоступный компьютер (интернет-кафе, библиотека и т. д.), Другие пользователи могут легко украсть данные вашей карты, и даже на вашем собственном компьютере вредоносный веб-сайт может украсть данные автозаполнения.

Чтобы избежать недопустимого XHTML, вы можете установить этот атрибут с помощью javascript. Пример использования jQuery:

<input type = "text" class = "noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Проблема в том, что пользователи без javascript получат функцию автозаполнения.

Добавление

autocomplete = "off"

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

Проверено на:

• Firefox 3.5, 4 БЕТА
• Internet Explorer 8
• Хром

Я думаю, что autocomplete=off поддерживается в HTML 5.

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

Это менее удобно для пользователей и даже не является проблемой безопасности в OS X (упоминается Сореном ниже). Если вы беспокоитесь о том, что у людей украдут пароли удаленно - регистратор нажатий клавиш все равно может это сделать, даже если ваше приложение использует autcomplete=off.

Как пользователя, который предпочитает, чтобы браузер запоминал (большую часть) моей информации, меня раздражало бы, если бы ваш сайт не запомнил мою.

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

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

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

Вы можете использовать в input.

Например;

<input type=text name = "test" autocomplete = "off" />

попробуйте и их, если только autocomplete = "off" не работает:

autocorrect = "off" autocapitalize = "off" autocomplete = "off"

Три варианта: Первый:

<input type='text' autocomplete='off' />

Второй:

<form action='' autocomplete='off'>

Третий (код javascript):

$('input').attr('autocomplete', 'off');

В этом разговоре у меня не сработало ни одно решение.

Я наконец выяснил, что чистое решение HTML требует нет Javascript, работает в современных браузерах (кроме IE; там должен был быть как минимум 1 улов, верно?), И не требует отключения автозаполнения для всей формы.

Просто отключите автозаполнение на form, а затем включите его для любого input, если вы хотите, чтобы он работал в форме. Например:

<form autocomplete = "off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name = "username"  />
    <input name = "password" type = "password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name = "another_field" autocomplete = "on" />
</form>

Большинство основных браузеров и менеджеров паролей (правильно, IMHO) теперь игнорируют autocomplete=off.

Почему? Многие банки и другие веб-сайты с высоким уровнем безопасности добавили autocomplete=off на свои страницы входа «в целях безопасности», но это фактически снижает безопасность, поскольку заставляет людей менять пароли на этих сайтах с высоким уровнем безопасности, чтобы их было легко запомнить (и, следовательно, взломать), поскольку автозаполнение было нарушено.

Давным-давно большинство менеджеров паролей начали игнорировать autocomplete=off, а теперь браузеры начинают делать то же самое только для ввода имени пользователя и пароля.

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

Что делать веб-разработчику?

• Если вы можете сохранить все поля пароля на странице сами по себе, это отличное начало, поскольку кажется, что наличие поля пароля является основным триггером для срабатывания автозаполнения пользователя / пароля. В противном случае прочитайте советы ниже.
• Сафари замечает, что есть 2 поля пароля, и отключает автозаполнение в этом случае, предполагая, что это должна быть форма смены пароля, а не форма входа. Поэтому просто обязательно используйте 2 поля пароля (новый и подтвердите новый) для любых форм, в которых вы разрешаете

• Хром 34, к сожалению, будет пытаться автоматически заполнять поля с помощью user / pass всякий раз, когда видит поле пароля. Это довольно плохая ошибка, которая, надеюсь, изменит поведение Safari. Однако добавление этого в верхнюю часть формы, похоже, отключает автозаполнение пароля:

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

Я еще не изучил IE или Firefox полностью, но буду рад обновить ответ, если у других есть информация в комментариях.

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

Этот обходной путь дополняет сообщение апинштейна о поведении браузера.

исправить автозаполнение браузера в режиме только для чтения и установить доступ для записи в фокусе (щелчок и вкладка)

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

Обновлять: 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. Поскольку браузер является последним экземпляром, и вы не можете его контролировать,

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

Я пробовал бесконечные решения, а потом нашел следующее:

Вместо autocomplete = "off" просто используйте autocomplete = "false"

Все очень просто, и это прекрасно работает и в Google Chrome!

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

Изменение имени входа для двух запросов решит проблему (но все равно будет сохранено в кеше браузера, а также увеличит кеш браузера).

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

Вот исправление. Все элементы автозаполнения генерируются со скрытым вводом следующим образом:

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method = "POST" action = "./">
    <input type = "text" name = "<?php echo $r; ?>" />
    <input type = "hidden" name = "__autocomplete_fix_<?php echo $r; ?>" value = "username" />
    <input type = "submit" name = "submit" value = "submit" />
</form>

Затем сервер обрабатывает переменные сообщения следующим образом: (Демо)

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

К значению можно получить доступ как обычно

echo $_POST['username'];

И браузер не сможет предложить информацию из предыдущего запроса или от предыдущих пользователей.

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

Ни один из упомянутых здесь хаков не помог мне в Chrome. Здесь обсуждается проблема: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Добавление этого в <form> работает (по крайней мере, на данный момент):

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

Я знаю, что это старый пост, но может быть важно знать, что Firefox (я думаю, только firefox) использует значение ismxfilled, которое в основном вызывает автозаполнение.

ismxfilled = "0" для OFF

или же

ismxfilled = "1" для ON

Добавление autocomplete = "off" никуда не годится.

Измените атрибут типа ввода на type = "search".
Google не применяет автозаполнение к входам с типом поиска.

Safari не изменит своего мнения об автозаполнении, если вы установите autocomplete = "off" динамически из javascript. Однако было бы уважением, если бы вы делали это для каждого поля.

$(':input', $formElement).attr('autocomplete', 'off');

<script language = "javascript" type = "text/javascript">
    $(document).ready(function () {
        try {
            $("input[type='text']").each(function(){
                           $(this).attr("autocomplete","off");
                        });
        }
        catch (e)
        { }
    });

</script>

Chrome - это планирую поддержать это.

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

хром обсуждение

<input type='search' name = "whatever" />

чтобы быть совместимым с firefox, используйте обычный autocomplete = 'off'

<input type='search' name = "whatever" autocomplete='off' />

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

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

1. По ярлыку браузера

2. По коду

   Для отключения в браузере перейдите в настройку

   

Перейдите к расширенным настройкам и снимите флажок, а затем - Восстановить.

Если вы хотите отключить метку кодирования, вы можете сделать это следующим образом:
Используя AutoCompleteType = "Disabled":

<asp:TextBox runat = "server" ID = "txt_userid" AutoCompleteType = "Disabled"></asp:TextBox>  

Установив форму autocomplete = "off":

<asp:TextBox runat = "server" ID = "txt_userid" autocomplete = "off"></asp:TextBox> 

Установив форму autocomplete = "off":

<form id = "form1" runat = "server" autocomplete = "off">  
    //your content
</form>  

Используя код на странице .cs

protected void Page_Load(object sender, EventArgs e)  
    {  
    if (!Page.IsPostBack)  
    {  


        txt_userid.Attributes.Add("autocomplete", "off");  

    }  
}  

Используя JQuery

head runat = "server">  
<title></title>  
<script src = "Scripts/jquery-1.6.4.min.js"></script>  
<script type = "text/javascript">  
    $(document).ready(function () {  
        $('#txt_userid').attr('autocomplete', 'off');  

    });  

</script>  

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

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 like so :

autocomplete = "nope"

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

<div style = "height:0px; overflow:hidden; ">
  Username <input type = "text" name = "fake_safari_username" >
  Password <input type = "password" name = "fake_safari_password">
</div>

Надеюсь, это кому-нибудь пригодится!

Если ваша проблема связана с автоматическим заполнением поля пароля, вы можете найти это полезным ...

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

<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type = "password" id = "txtPassword" style = "display:none;" />
<!-- This is the real password input -->
<input type = "password" id = "txtThisIsTheRealPassword" />

Обратите внимание, что в Firefox и IE было достаточно просто поместить любой ввод типа пароля перед фактическим, но Chrome увидел это и заставил меня на самом деле назвать ввод поддельного пароля (дав ему очевидный идентификатор пароля), чтобы получить его "кусать". Я использовал класс для реализации стиля вместо использования встроенного стиля, поэтому попробуйте это, если по какой-то причине вышеперечисленное не работает.

Вы можете просто поместить autocomplete = "off" в поля HTML, как показано ниже.

<input type = "text" name = "" value = "" autocomplete = "off" />

Итак, вот оно:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput = "turnOnPasswordStyle()" id = "inputpassword" type = "text">

Ответ dsuess, отправленный только для чтения, был очень умным и работал. Но поскольку я использую ускорение, поле ввода только для чтения было - до тех пор, пока оно не было сфокусировано - помечено серым фоном. Пока документ загружается, вы можете обмануть браузер, просто заблокировав и разблокировав ввод.

Итак, у меня возникла идея реализовать это в решении jQuery:

    jQuery(document).ready(function () {
        $("input").attr('readonly', true);
        $("input").removeAttr('readonly');
   });

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

Уловка: использование таймера для сброса формы и установки пустых полей пароля. Продолжительность 100 мс кажется минимальной для работы.

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});

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

Я использую следующий фрагмент jQuery:

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false) // Make a copy (except events)
            .insertBefore($el)   // Place it before original field
            .prop('id', '')      // Prevent ID duplicates
            .hide()              // Make it invisible for user
        ;
    });
};

И чем просто $('#login-form input').preventAutocomplete();

Обходной путь - не вставлять поле пароля в DOM до того, как пользователь захочет изменить пароль. Это может быть применимо в определенных случаях:

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

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

Решение заключалось в том, чтобы установить флажок, чтобы указать, вставлено ли поле пароля в DOM, а не только его видимость.

Псевдо-реализация для AngularJS:

<input type = "checkbox" ng-model = "createPassword">
<input ng-if = "changePassword" type = "password">

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

Что касается Internet Explorer 11, есть функция безопасности, которую можно использовать для блокировки автозаполнения. Это работает так:

Любое входное значение формы, измененное в JavaScript ПОСЛЕ того, как пользователь уже ввел его, помечается как непригодное для автозаполнения.

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

Однако вы можете вставить один специальный символ в начало строки пароля, чтобы заблокировать автозаполнение. Этот специальный символ может быть обнаружен и удален позже по конвейеру.

Решение для Chrome - добавить autocomplete = "new-password" к паролю типа ввода. Пожалуйста, проверьте пример ниже.

Пример:

<form name = "myForm"" method = "post">
   <input name = "user" type = "text" />
   <input name = "pass" type = "password" autocomplete = "new-password" />
   <input type = "submit">
</form>

Chrome всегда автоматически заполняет данные, если находит поле введите пароль, которого достаточно, чтобы указать для этого поля autocomplete = "new-password".

This works well for me.

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

У меня это работает.

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

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

Кажется, что этого невозможно достичь без использования комбинации клиентского и серверного кода.

Чтобы быть уверенным, что пользователь должен каждый раз заполнять форму без автозаполнения, я использую следующие приемы:

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

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

Вот рабочий пример, демонстрирующая javascript, css и html, как описано в # 2 https://jsfiddle.net/xnbxbpv4/

javascript:

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css:

.disable-input {
  display: none;
}

html:

<form>
<input type = "email" name = "username" placeholder = "username" class = "disable-input">
<input type = "email" name = "username" placeholder = "username">
<input type = "email" name = "username" placeholder = "username" class = "disable-input">
<br>
<input type = "password" name = "password" placeholder = "password" class = "disable-input">
<input type = "password" name = "password" placeholder = "password">
<input type = "password" name = "password" placeholder = "password" class = "disable-input">
<br>
<input type = "submit" value = "submit">
</form>

Вот примерный пример того, что код сервера, использующий asp.net с бритвой, должен облегчить # 1

модель:

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

контроллер:

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

Посмотреть:

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type = "email" name = "@Model.Username" placeholder = "username" class = "disable-input">
    <input type = "email" name = "@Model.Username" placeholder = "username">
    <input type = "email" name = "@Model.Username" placeholder = "username" class = "disable-input">
    <br>
    <input type = "password" name = "@Model.Password" placeholder = "password" class = "disable-input">
    <input type = "password" name = "@Model.Password" placeholder = "password">
    <input type = "password" name = "@Model.Password" placeholder = "password" class = "disable-input">
    <br>
    <input type = "submit" value = "submit">
}

autocomplete = 'off' не сработал для меня, в любом случае я установил атрибут value поля ввода на пробел, то есть <input type='text' name='username' value = " ">, который установил символ ввода по умолчанию на пробел, и поскольку имя пользователя было пустым, пароль также был очищен.

Я использую этот TextMode = "password" autocomplete = "new-password" и при загрузке страницы в aspx txtPassword.Attributes.Add("value", '');

Попробуй это :

<input type='text' autocomplete='off' />

In addition to

autocomplete = "off"

Use

readonly onfocus = "this.removeAttribute('readonly');"

для входов, которые вы не хотите, чтобы они запоминали данные формы (username, password и т. д.), как показано ниже:

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

<input type = "password" name = "Password" autocomplete = "off" readonly 
    onfocus = "this.removeAttribute('readonly');" >

Надеюсь это поможет.

Ни один из представленных ответов не работал во всех протестированных мной браузерах. Основываясь на уже предоставленных ответах, это то, к чему я пришел (протестировал) на Хром 61, Microsoft Edge 40 (EdgeHTML 15), IE 11, Firefox 57, Опера 49 и Safari 5.1. Это странно в результате многих испытаний; однако это работает для меня.

<form autocomplete = "off">
    ...
    <input type = "password" readonly autocomplete = "off" id = "Password" name = "Password" onblur = "this.setAttribute('readonly');" onfocus = "this.removeAttribute('readonly');" onfocusin = "this.removeAttribute('readonly');" onfocusout = "this.setAttribute('readonly');" />
    ...
</form> 

<script type = "text/javascript">
    $(function () {           
        $('input#Password').val('');
        $('input#Password').on('focus', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keyup', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keydown', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
</script>

Многие современные браузеры больше не поддерживают autocomplete = "off" для полей входа. Вместо этого работает autocomplete = "new-password", дополнительная информация Документы MDN

Фиксированный. Просто нужно добавить над реальным полем ввода

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - средний протестировано на EDGE, Chrome (последняя v63), Firefox Quantum (57.0.4 64-бит), Firefox (52.2.0) поддельные поля - это обходной путь для автозаполнения Chrome / Opera с неправильными полями

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type = "password" name='fake-password' autoComplete='new-password' tabIndex='-1' style = {fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

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

Например:

<input type=text name = "test" autocomplete = "off" />

если приведенный выше код не работает, попробуйте также добавить эти атрибуты

autocapitalize = "off" autocomplete = "off"

или же

Измените атрибут типа ввода на type = "search". Google не применяет автозаполнение к входам с типом поиска.

Лучшее решение:

Запретить автозаполнение имени пользователя (или адреса электронной почты) и пароля:

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

Работает в:

• Хром: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 и 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 и 58.

Мое решение - изменить тип текстовых входов динамически с помощью директивы angular js и это работает как шарм

сначала добавьте 2 скрытых текстовых поля

и просто добавьте такую ​​директиву angular

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

затем используйте его в текстовом поле, где вам нужно предотвратить автозаполнение

    <input type = "text" style = "display:none">\can avoid this 2 lines
    <input type = "password" style = "display:none">
    <input type = "text"  autocomplete = "new-password" change-password-type>

NB: не забудьте включить jquery и изначально установить type = "text"

Никаких фальшивых вводов, никакого javascript!

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

<style type = "text/css">
    @font-face {
        font-family: 'PasswordDots';
        src: url('text-security-disc.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    input.password {
        font-family: 'PasswordDots' !important;
        font-size: 8px !important;
    }
</style>

<input class = "password" type = "text" spellcheck = "false" />

Скачать: текст-безопасность-disc.woff

Вот как выглядит мой окончательный результат:

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

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

<form style = "position: relative">
  <div style = "position: absolute; top: -999px; left: -999px;">
    <input name = "username" type = "text" />
    <input name = "password" type = "password" />
  </div>
  <input name = "username" type = "text" />
  <input name = "password" type = "password" />

Сначала я попытался добавить display:none; к входам, но Chrome проигнорировал их и автоматически заполнил видимые.

Чтобы решить эту проблему, я использовал некоторые приемы CSS, и у меня сработало следующее.

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Пожалуйста, прочтите статью это для более подробной информации.

Google Chrome игнорирует атрибут autocomplete = "off" для определенных входных данных, включая входные данные пароля и общие входные данные, определяемые по имени.

Например, если у вас есть вход с именем address, то Chrome будет предлагать автозаполнение с адресов, введенных на других сайтах, даже если ты скажешь не:

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

Если вы не хотите, чтобы Chrome делал это, вы можете переименовать или создать пространство имен для имени поля формы:

<input type = "string" name = "mysite_addr" autocomplete = "off">

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

<input type = "string" name = "mysite_addr" autocomplete = "on">

Чтобы предотвратить автоматическое заполнение браузера сохраненными учетными данными пользователя для входа на сайт, поместите поле ввода текста и пароля вверху формы с непустыми значениями и стилем "position: absolute; top: -999px; left: -999px", чтобы скрыть поля.

<form>
  <input type = "text" name = "username_X" value = "-" tabindex = "-1" aria-hidden = "true" style = "position: absolute; top: -999px; left:-999px" />
  <input type = "password" name = "password_X" value = "-" tabindex = "-1" aria-hidden = "true" style = "position: absolute; top: -999px; left:-999px" />
  <!-- Place the form elements below here. -->
</form>

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

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

Важно, чтобы эти два поля располагались перед полями "настоящего" типа пароля в форме.

Для новых браузеров, совместимых с html 5.3, должно работать значение атрибута автозаполнения «новый пароль».

<form>
  <input type = "text" name = "username" value = "" />
  <input type = "password" name = "password" value = "" autocomplete = "new-password" />
</form>

Комбинация этих двух методов может использоваться для поддержки как старых, так и новых браузеров.

<form>
  <div style = "display:none">
    <input type = "text" readonly tabindex = "-1" />
    <input type = "password" readonly tabindex = "-1" />
  </div>
  <!-- Place the form elements below here. -->
  <input type = "text" name = "username" value = "" />
  <input type = "password" name = "password" value = "" autocomplete = "new-password" />
</form>

Я решил бесконечную борьбу с Google Chrome с использованием случайных символов. Когда вы всегда визуализируете автозаполнение со случайной строкой, он никогда ничего не запомнит.

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

Надеюсь, что это поможет другим людям.

Если вы хотите предотвратить автоматическое заполнение поля общим подключаемым модулем браузера LastPass, вы можете добавить атрибут data-lpignore = "true" к другим предложениям в этой ветке. Обратите внимание, что это относится не только к полям пароля.

<input type = "text" autocomplete = "false" data-lpignore = "true" />

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

Это сработало для меня как шарм.

1. Отключите атрибут автозаполнения формы
2. Добавьте фиктивное поле ввода и отключите его атрибут.

<form autocomplete = "off">
 <input type = "text" autocomplete = "off" style = "display:none">
</form>

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

<input id='input_password' type='text' autocomplete='off' autofocus>

Есть переменная с именем "input", заданная как пустая строка ...

var input = "";

За полевыми событиями следит JQuery ...

1. В фокусе всегда очищается содержимое поля и соответствующая «входная» переменная.
2. При нажатии клавиши любой буквенно-цифровой символ, а также некоторые определенные символы добавляются к переменной «input», а поле input заменяется символом маркера. Кроме того, при нажатии клавиши Enter набранные символы (хранящиеся в переменной input) отправляются на сервер через Ajax. (См. «Сведения о сервере» ниже.)
3. При нажатии клавиши Home, End и Arrow сбрасываются "входные" значения переменных и полей. (Я мог бы поработать со стрелками и событием фокуса и использовать .selectionStart, чтобы выяснить, где пользователь щелкнул или выполнял навигацию, но это не стоит усилий для поля пароля.) Кроме того, нажатие клавиши Backspace обрезает и то, и другое. переменная и содержимое поля соответственно.

$("#input_password").off().on("focus", function(event) {
    $(this).val("");
    input = "";

}).on("keypress", function(event) {
    event.preventDefault();

    if (event.key !== "Enter" && event.key.match(/^[0-9a-z!@#$%&*-_]/)) {
        $(this).val( $(this).val() + "•" );
        input += event.key;
    }
    else if (event.key == "Enter") {
        var params = {};
        params.password = input;

        $.post(SERVER_URL, params, function(data, status, ajax) {
            location.reload();
        });
    }

}).on("keyup", function(event) {
    var navigationKeys = ["Home", "End", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
    if ($.inArray(event.key, navigationKeys) > -1) {
        event.preventDefault();
        $(this).val("");
        input = "";
    }
    else if (event.key == "Backspace") {
        var length = $(this).val().length - 1 > 0 ? $(this).val().length : 0;
        input = input.substring(0, length);
    }
});

Обзор Front-End

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

Сведения о сервере (необязательное чтение)

Как показано выше, Javascript выполняет location.reload (), как только сервер возвращает ответ JSON. (Этот метод входа в систему предназначен для доступа к ограниченному инструменту администрирования. Некоторые излишки, связанные с содержимым файлов cookie, могут быть пропущены для более общей реализации.) Вот подробности:

• Когда пользователь переходит на сайт, сервер ищет допустимый файл cookie.
• Если файл cookie отсутствует, отображается страница входа в систему. Когда пользователь вводит пароль, и он отправляется через Ajax, сервер подтверждает пароль, а также проверяет чтобы узнать, находится ли IP-адрес пользователя в списке авторизованных IP-адресов.
• Если пароль или IP-адрес не распознаются, сервер не генерирует cookie, поэтому при перезагрузке страницы пользователь видит ту же страницу входа в систему.
• Если распознаются и пароль, и IP, сервер генерирует cookie, который имеет десятиминутный срок жизни, а также хранит два скремблированных значения, которые соответствуют временным рамкам и IP.
• Когда страница перезагружается, сервер находит cookie и проверяет, что зашифрованные значения верны (т. е. что временной интервал соответствует дате файла cookie и что IP-адрес совпадает).
• Процесс аутентификации и обновления файла cookie повторяется каждый раз, когда пользователь взаимодействует с сервером, независимо от того, входит ли он в систему, отображает данные или обновляет запись.
• Если значения cookie всегда верны, сервер представляет полный веб-сайт (если пользователь входит в систему) или выполняет любой запрос на отображение или обновление, который был отправлен.
• Если в любой момент значения cookie неверны, сервер удаляет текущий файл cookie, который затем при перезагрузке приводит к тому, что страница входа в систему становится повторно отображается.

Вы можете добавить имя в атрибут name, как адрес email для вас формируется и генерирует значение электронной почты, например:

<form id = "something-form">
  <input style = "display: none" name = "email" value = "randomgeneratevalue"></input>
  <input type = "password">
</form>

Если вы используете этот метод, Google Chrome не сможет вставить пароль для автозаполнения.

Большинство ответов не помогли, поскольку браузер их просто игнорировал. (Некоторые из них не были кроссбраузерными). Исправление, которое сработало для меня:

<form autocomplete = "off">
    <input type = "text" autocomplete = "new-password" />
    <input type = "password" autocomplete = "new-password" />
</form>

Я установил autofill = "off" в теге формы и autofill = "new-password" везде, где автозаполнение не было необходимо.

Easy Hack

Сделать ввод доступным только для чтения

<input type = "text" name = "name" readonly = "readonly">

Удалить только чтение после тайм-аута

$(function() {
        setTimeout(function() {
            $('input[name = "name"]').prop('readonly', false);
        }, 50);
    });

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

Я решил поместить этот код после загрузки страницы:

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>

Я столкнулся с той же проблемой, сегодня, 10.09.2019, я нашел только одно решение:

Добавьте autocomplete = "off" в тег формы.

поставить 1 ложный ввод после открытия тега формы.

<input id = "username" style = "display:none" type = "text" name = "fakeusernameremembered">

но он не будет работать с полем типа пароля, попробуйте

<input type = "text" oninput = "turnOnPasswordStyle()" placeholder = "Enter Password" name = "password" id = "password" required>

по сценарию

function turnOnPasswordStyle() {
    $('#password').attr('type', "password");
}

Это проверено на Chrome-78, IE-44, Firefox-69.

Самый простой ответ

<input autocomplete = "on|off">

Но имейте в виду поддержку браузера. В настоящее время атрибут автозаполнения поддерживается

Chrome 17.0 и новее IE 5.0 и последняя версия
Firefox 4.0 и более поздние версии
Safari 5.2 и последняя версия
Opera 9.6 и новее

Чтобы избежать автозаполнения, добавьте autocomplete = "off" к свойству ввода html.

Пример:

<input type = "text" name = "foo" autocomplete = "off" />

Мое решение с jQuery. Это может быть не на 100% надежным, но у меня это работает. Идея описана в аннотациях к коду.

    /**
 * Prevent fields autofill for fields.
 * When focusing on a text field with autocomplete (with values: "off", "none", "false") we replace the value with a new and unique one (here it is - "off-forced-[TIMESTAMP]"),
 * the browser does not find this type of autocomplete in the saved values and does not offer options.
 * Then, to prevent the entered text from being saved in the browser for a our new unique autocomplete, we replace it with the one set earlier when the field loses focus or when user press Enter key.
 * @type {{init: *}}
 */
var PreventFieldsAutofill = (function () {
    function init () {
        events.onPageStart();
    }

    var events = {
        onPageStart: function () {
            $(document).on('focus', 'input[autocomplete = "off"], input[autocomplete = "none"], input[autocomplete = "false"]', function () {
                methods.replaceAttrs($(this));
            });
            $(document).on('blur', 'input[data-prev-autocomplete]', function () {
                methods.returnAttrs($(this));
            });
            $(document).on('keydown', 'input[data-prev-autocomplete]', function (event) {
                if (event.keyCode == 13 || event.which == 13) {
                    methods.returnAttrs($(this));
                }
            });
            $(document).on('submit', 'form', function () {
                $(this).find('input[data-prev-autocomplete]').each(function () {
                    methods.returnAttrs($(this));
                });
            });
        }
    };

    var methods = {
        /**
         * Replace value of autocomplete and name attribute for unique and save the original value to new data attributes
         * @param $input
         */
        replaceAttrs: function ($input) {
            var randomString = 'off-forced-' + Date.now();
            $input.attr('data-prev-autocomplete', $input.attr('autocomplete'));
            $input.attr('autocomplete', randomString);
            if ($input.attr('name')) {
                $input.attr('data-prev-name', $input.attr('name'));
                $input.attr('name', randomString);
            }
        },
        /**
         * Restore original autocomplete and name value for prevent saving text in browser for unique value
         * @param $input
         */
        returnAttrs: function ($input) {
            $input.attr('autocomplete', $input.attr('data-prev-autocomplete'));
            $input.removeAttr('data-prev-autocomplete');
            if ($input.attr('data-prev-name')) {
                $input.attr('name', $input.attr('data-prev-name'));
                $input.removeAttr('data-prev-name');
            }
        }
    };

    return {
        init: init
    }
})();
PreventFieldsAutofill.init();

.input {
  display: block;
  width: 90%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action = "#">
  <p>
    <label for = "input-1">Firts name without autocomplete</label><br />
    <input id = "input-1" class = "input" type = "text" name = "first-name" autocomplete = "off" placeholder = "Firts name without autocomplete" />
  </p>
  <p>
    <label for = "input-2">Firts name with autocomplete</label><br />
    <input id = "input-2" class = "input" type = "text" name = "first-name" autocomplete = "given-name" placeholder = "Firts name with autocomplete" />
  </p>
  <p>
    <button type = "submit">Submit form</button>
  </p>
</form>

Я перепробовал почти все ответы, но новая версия Chrome умна; если вы напишете

autocomplete = "randomstring" or autocomplete = "rutjfkde"

он автоматически преобразует его в

autocomplete = "off"

когда элемент управления вводом получает фокус.

Итак, я сделал это с помощью jQuery, мое решение следующее.

$("input[type=text], input[type=number], input[type=email], input[type=password]").focus(function (e) {
    $(this).attr("autocomplete", "new-password");
})

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

По состоянию на декабрь 2019 г .:

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

Итак, вот решение, которое я нашел, и я считаю, что оно еще не обсуждалось и не упоминалось в этом посте.

Согласно сообщению Mozilla Dev Network (MDN) о как отключить автозаполнение формы

By default, browsers remember information that the user submits through fields on websites. This enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load)

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

Решение

Итак, в конце статьи они поделились решением, которое работает для всех браузеров, включая IE11 + Edge. По сути, это плагин jQuery, который делает свое дело. Вот плагин связь to jQuery и как он работает.

Фрагмент кода:

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

Обратите внимание на то, что в HTML поле пароля имеет текстовый тип, и для идентификации этого поля применяется класс password:

<input id = "Password" name = "Password" type = "text" class = "form-control password">

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

Просто попробуйте поставить атрибут autocomplete со значением "off" к типу ввода.

<input type = "password" autocomplete = "off" name = "password" id = "password" />

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

Пример в React:

import React, {Component} from 'react';

class NoAutoFillInput extends Component{

    constructor() {
        super();
        this.state = {
            locked: true
        }
    }

    onChange(event){
        if (!this.state.locked){
            this.props.onChange(event.target.value);
        }
    }

    render() {
        let props = {...this.props, ...{onChange: this.onChange.bind(this)}, ...{onSelect: () => this.setState({locked: false})}};
        return <input {...props}/>;
    }
}

export default NoAutoFillInput;

Если браузер пытается заполнить поле, элемент по-прежнему заблокирован, и его состояние не изменяется. Теперь вы можете просто заменить поле ввода компонентом NoAutoFillInput, чтобы предотвратить автозаполнение:

<div className = "form-group row">
    <div className = "col-sm-2">
        <NoAutoFillInput type = "text" name = "myUserName" className = "form-control" placeholder = "Username" value = {this.state.userName} onChange = {value => this.setState({userName: value})}/>
    </div>
    <div className = "col-sm-2">
        <NoAutoFillInput type = "password" name = "myPassword" className = "form-control" placeholder = "Password" value = {this.state.password} onChange = {value => this.setState({password: value})}/>
    </div>
</div>

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

Ни одно из решений, которые я нашел на сегодняшний день, не дает реального рабочего отклика.

Решения с атрибутом autocomplete не работают.

Итак, вот что я написал для себя:

<input type = "text" name = "UserName" onkeyup = "if (this.value.length > 0) this.setAttribute('type', 'password'); else this.setAttribute('type', 'text');" >

Вы должны сделать это для каждого поля ввода, которое вы хотите использовать в качестве типа пароля на своей странице.

И это работает.

ваше здоровье

Просто autocomplete = "off" list = "autocompleteOff" в вашем вводе и работа сделана для IE / Edge! а для хрома добавить autocomplete = "new password"

Есть много ответов, но большинство из них - это хаки или какие-то обходные пути.

Здесь есть три случая.

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

Если вы все же хотите это сделать, см. Дело III

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

Использовать

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

Случай III: Если это не ваша обычная форма входа в систему, а атрибут входных данных name или id - это электронная почта, логин, имя пользователя, имя пользователя, пароль.

Например: логин, abc_login, пароль, some_password, password_field.

Все браузеры оснащены функциями управления паролями, предлагающими их запоминать ИЛИ предлагая более надежные пароли. Вот как они это делают.

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

В таких случаях autocomplete = "off" работать не будет. Используйте autocomplete = "new-password"

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

Полезная ссылка:

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

Я много лет боролся с автозаполнением. Я пробовал каждое предложение, и ничего не помогло. Добавление атрибутов jQuery 2 сработало хорошо:

$(document).ready( function () {
    setTimeout(function() {
        $('input').attr('autocomplete', 'off').attr('autocorrect', 'off');
    }, 10);
}); 

приведет к HTML

<input id = "start_date" name = "start_date" type = "text" value = "" class = "input-small hasDatepicker" autocomplete = "off" placeholder = "Start date" autocorrect = "off">

Работает с Chrome 84.0.4147.105

1. Назначьте текстовый тип полям пароля и добавьте класс, например "fakepasswordtype"

<input type = "text" class = "fakepasswordtype" name = "password1">
<input type = "text" class = "fakepasswordtype" name = "password2">

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

jQuery(document).ready(function($) {
    $('.fakepasswordtype').on('input', function(e){
        $(this).prop('type', 'password');
    });
});

Это остановило Chrome от неприятного уродливого поведения при автозаполнении.

<input type = "text" name = "attendees" id = "autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.info('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>

В Chrome для ввода типа пароля у меня работает только autocomplete = "new-password".

Уверен, что это наиболее универсальное решение на сегодняшний день.

Это останавливает автозаполнение и всплывающее окно с предложениями.

вступление

Посмотрим правде в глаза, autocomplete = off или new-password, похоже, не работает. Это должно работать, но это не так, и каждую неделю мы обнаруживаем, что что-то еще изменилось, и браузер заполняет форму новым случайным мусором, который нам не нужен. Я обнаружил действительно простое решение, которое не требует автозаполнения на страницах входа.

Как реализовать

Шаг 1). Добавьте один и тот же вызов функции в атрибуты onmousedown и onkeyup для полей имени пользователя и пароля, убедившись, что вы указали им идентификатор И обратите внимание на код в конце вызова функции. md = mousedown и ku = keyup

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

Например:

<input type = "text" value = "&nbsp;" id = "myusername" onmousedown = "protectMe(this,'md')" onkeyup = "protectMe(this,'ku')" />

Шаг 2). Включите эту функцию на странице

function protectMe(el,action){

 // Remove the white space we injected on startup
 var v = el.value.trim();
 
// Ignore this reset process if we are typing content in
// and only acknowledge a keypress when it's the last Delete
// we do resulting in the form value being empty
 if (action=='ku' && v != ''){return;} 

// Fix double quote issue (in the form input) that results from writing the outerHTML back to itself
  v = v.replace(/"/g,'\"'); 
  
  // Reset the popup appearing when the form came into focus from a click  by rewriting it back
  el.outerHTML=el.outerHTML; 

  // Issue instruction to refocus it again, insert the value that existed before we reset it and then select the content.
  setTimeout("var d=document.getElementById('"+el.id+"'); d.value=\""+v+"\";d.focus();if (d.value.length>1){d.select();}",100);
}

Что оно делает?

• Сначала он добавляет в поле пробел  , поэтому браузер пытается чтобы найти подробности, связанные с этим, но ничего не нашел, так что автозаполнение исправлено
• Во-вторых, когда вы щелкаете, HTML создается снова, закрывая всплывающее окно, а затем значение добавляется обратно выбранным.
• Наконец, когда вы удаляете строку с помощью кнопки «Удалить», всплывающее окно обычно появляется снова, но проверка клавиатуры повторяет процесс, если мы попадаем в эту точку.

Какие проблемы?

• Нажатие, чтобы выбрать символ, является проблемой, но для страницы входа большинство простит тот факт, что на ней выделен весь текст.
• Javascript обрезает любые входные пробелы, но вы, возможно, захотите сделать это тоже на стороне сервера, чтобы быть в безопасности.

Может быть лучше?

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

Протестированные браузеры

Протестировано и работает с последними версиями Chrome, Firefox, Edge на момент публикации.

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

Во-первых, если это работает для этой задачи, откажитесь от input и используйте textarea. Насколько мне известно, автозаполнение / автозаполнение не имеет отношения к textarea, что является отличным началом с точки зрения того, чего мы пытаемся достичь. Теперь вам просто нужно изменить некоторые из поведения этого элемента по умолчанию, чтобы он работал как input.

Затем вы захотите сохранить любые длинные записи в одной строке, например input, и вы хотите, чтобы textarea прокручивал по оси Y с помощью курсора. Мы также хотим избавиться от поля изменения размера, поскольку мы делаем все возможное, чтобы имитировать поведение input, у которого нет дескриптора изменения размера. Мы достигаем всего этого с помощью небольшого быстрого CSS:

#your-textarea {
  resize: none;
  overflow-y: hidden;
  white-space: nowrap;
}

Наконец, вы захотите убедиться, что надоедливая полоса прокрутки не появляется, чтобы разрушить вечеринку (для этих особенно длинных записей), поэтому убедитесь, что ваша текстовая область не показывает ее:

#your-textarea::-webkit-scrollbar {
  display: none;
}

Очень просто. У нас не было проблем с автозаполнением с этим решением.

1. Оставьте поля ввода с текстовым типом и скрытыми.
2. В DOMContentLoaded вызовите функцию, которая изменяет типы пароля и отображает поля с задержкой в ​​1 с.

document.addEventListener('DOMContentLoaded', changeInputsType);

function changeInputsType() {
    setTimeout(function() {
        $(/*selector*/).prop("type", "password").show();
    }, 1000);
}

Попробовав все решения (некоторые сработали частично, отключив автозаполнение, но не автозаполнение, некоторые не работали вообще), я нашел лучшее решение на 2020 год, добавив type = "search" и autocomplete = "off" к вашему вводу. элемент. так:

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

Также убедитесь, что в элементе формы стоит autocomplete = "off". это работает отлично и отключает как автозаполнение, так и автозаполнение.

Кроме того, если вы используете type = "email" или любой другой тип текста, вам нужно добавить autocomplete = "new-email", и это полностью отключит оба. то же самое касается type = "password". просто добавьте префикс "новый-" к автозаполнению вместе с типом. как это:

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

Я уже опубликовал решение для этого здесь: https://stackoverflow.com/a/60664102/5117084

Обходной путь - установить для атрибута автозаполнения значение «cc-csc», значение которого является CVC кредитной карты и что им не разрешено его хранить! (сейчас...)

autocomplete = "cc-csc"