Программное отключение автозаполнения Chrome

Вы можете просто ввести autocomplete = "new-password" в поле пароля и все. Это должно работать нормально!

jquery.disable-autofill

Отключите автозаполнение Chrome. Удобно для форм CRUD, когда вы не хотите, чтобы ввод имени пользователя и пароля автоматически заполнялся браузером.

Usage:

<form>
  <input type = "input" name = "username" autofill = "off" autocomplete = "off">
  <input type = "password" name = "password"  autofill = "off" autocomplete = "off">
</form>

<script src = "jquery.disable-autofill.js"></script>
<script>
  $('input[autofill = "off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

autocomplete = "off"не работает больше нет. Единственное, что работает с 2019 г., - это autocomplete = "new-password".

Проверьте эту ссылку в Chromium Project https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands

Add an autocomplete attribute with a value of username for usernames.

If you've implemented an "email first" sign-in flow that separates the username and password into two separate forms, include a form field containing the username in the form used to collect the password. You can, of course, hide this field via CSS if that's appropriate for your layout.

Add an autocomplete attribute with a value of current-password for the password field on a sign-in form.

Add an autocomplete attribute with a value of new-password for the password field on sign-up and change-password forms.

If you require the user to type their password twice during sign-up or password update, add the new-password autocomplete attribute on both fields.

<form id = "login" action = "signup.php" method = "post">
  <input type = "text" autocomplete = "new-password">
  <input type = "password" autocomplete = "new-password">
  <input type = "submit" value = "Sign Up">
</form>

На данный момент (май 2019 г.) хорошо работает только autocomplete = "new-password".

Это можно сделать программно с помощью jQuery, например:

$('form, input, select').attr('autocomplete', 'new-password');

Не очень элегантное решение, но оно работает. Автозаполнение запускается, когда документ готов. Если мы отключим поля ввода на секунду, произойдет сбой, и тогда мы сможем снова включить формы ввода. Это может быть полезно для форм входа в систему и пользовательских форм на cruds. Лучшим подходом будет установка некоторого оверлея с анимацией загрузки или чего-то более удобного для пользователя.

Пример JQuery:

  $(document).ready(function() {

    $('#[FORM_ID] input').prop('disabled',true);
   setTimeout(function(){ $('#[FORM_ID] input').prop('disabled',false); }, 1000);
});

Замените # [FORM_ID] идентификатором вашей формы.

Работай со мной

  <input [name] = "nameControl" type = "text" autocomplete = "new-password">

в компоненте:

  this.nameControl = "name" + this.getRandomInt();

  getRandomInt() {
    return Math.floor(Math.random() * Math.floor(100));
  }

Использование jQuery в сентябре 2019 года. Единственное, чего я добился близкой к согласованности, - отключение автозаполнения / автозаполнения для всей формы:

$('.disable-autofill').focus(function () {
    $(this).attr('autocomplete', 'new-password');
});
$('.disable-autofill').blur(function () {
    $(this).removeAttr('autocomplete');
});

Затем примените класс к своим входам, например:

<input name = "first_name" class = "disable-autofill">

Вы должны удалить атрибут, потому что, если слишком много входов имеют autocomplete, хром снова начинает его игнорировать :)

СТАРЫЙ ОТВЕТ:

Вы можете попробовать брутфорс:

function annihilateChromesAutocomplete(){
    var clearAutocompleteInterval = setInterval(function(){
        var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
        for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
            peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
        }
    }, 1);
    setTimeout(function(){
        clearInterval(clearAutocompleteInterval);
    }, 2000);
}

Обновлено:

Я наткнулся на более простое и понятное решение. Если вы сделаете type по умолчанию для ввода чем-то странным, например time, а затем измените type динамически с помощью JavaScript при загрузке страницы, Chrome будет искать n-й ввод time и в конечном итоге проигнорирует ваши вводы.

window.addEventListener('load', function(){
  var inputs = document.getElementsByTagName("input");
  for(var i = 0; i < inputs.length; i++){
    if (inputs[i].type == "time"){
      inputs[i].type = "text";
    }
  }
});

<input type = "time"/>
<input type = "time"/>
<input type = "time"/>

Если вам не нужно сохранять пароль в браузере, вот решение, использующее только css. Выберите type = "text" для поля ввода:

<input class = "text-security-disc" type = "text">

и добавить стиль для ввода, который скрывает текст:

.text-security-disc {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    text-security: disc;
}

Это не работает для Mozilla Firefox, я использовал этот шрифт: https://github.com/noppa/text-security

Для React вы можете сделать что-то вроде этого -

<input id = {id} name = {'a'+Math.random()} type = "text" />

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

const value = document.getElementById(id)

(Отчасти так работает плагин jQuery Disable Auto Fill).

Решил эту проблему с помощью autocomplete = "нет"

<input type = "text" autocomplete = "nope" />

убедитесь, что ваш элемент ввода находится внутри тега <form>. отключение автозаполнения у меня не работало до этого.

Как отключить автозаполнение в Chrome 86+

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

1. Добавьте класс .disable-autocomplete в любое поле (поля) ввода.

<input name = "blahblah" type = "text" class = "disable-autocomplete">

2. Отключите автозаполнение адреса, задав уникальное значение автозаполнения, и регулярное автозаполнение, задав уникальный идентификатор.

<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
var uniqueAutocompleteID = + new Date();
$(".disable-autocomplete").attr("autocomplete", uniqueAutocompleteID);
$(".disable-autocomplete").attr("id", uniqueAutocompleteID);
</script>

Попробуйте https://github.com/terrylinooo/disableautofill.js

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js"></script>

Применение:

 var daf = new disableautofill({
    'form': '#testForm',
    'fields': [
        '.test-pass',  // password
        '.test-pass2'  // confirm password
    ],
    'debug': true,
    'callback': function() {
        return checkForm(); // Form validator
    }
});

daf.init();

Я мог бы решить это с помощью этого кода:

<form autocomplete = "off">
 <input type = "text" name = "text" autocomplete = "off" spellcheck = "off" autocorrect = "off"/>
</form>

Используйте autocomplete = "off", чтобы отключить autocomplete

и type = "search" для отключения адреса autofill