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

Question

Как отключить autocomplete в основных браузерах для определенного input (или form field)?

Answer 1

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

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

Answer 2

Мне удалось остановить автозаполнение 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 проигнорировал их и автоматически заполнил видимые.

Answer 3

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

Например:

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

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

autocapitalize="off" autocomplete="off"

или

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

Answer 4

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

// Prevent input autocomplete
$.fn.preventAutocomplete = function() {
    this.each(function () {
        var $el = $(this);
        $el
            .clone(false, false)
            .insertBefore($el)
            .prop('id', '')
            .hide()
        ;
    });
};

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

Answer 5

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

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

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

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

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

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

Answer 6

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

Answer 7

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

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

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

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

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

Answer 8

Ни один из предоставленных ответов не работал во всех браузерах, которые я тестировал. Опираясь на уже предоставленные ответы, это то, чем я закончил (протестировано) на Chrome 61 , Microsoft Edge 40 (EdgeHTML 15), IE 11 Firefox 57 , Opera 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>

Answer 9

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

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

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

Answer 10

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

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