Chrome игнорирует автозаполнение ="выкл"

Question

Я создал веб-приложение, которое использует раскрывающийся список тегов. Это прекрасно работает во всех браузерах, кроме браузера Chrome (версия 21.0.1180.89).

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

Answer 1

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

Поля, которые не являются паролями, но должны быть скрыты, например номера кредитных карт, также могут иметь атрибут type="password", но должны содержать соответствующий атрибут автозаполнения, такой как "cc-number" или "cc-csc".https://www.chromium.org/developers/design-documents/create-amazing-password-forms

<input id="haxed" type="password" autocomplete="cc-number">

Однако это связано с большой ответственностью:)

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

Answer 2

Начиная с Chrome 42, ни одно из решений / хаков в этой теме (по состоянию на 2015-05-21T12:50:23+00:00) работа по отключению автозаполнения для отдельного поля или всей формы.

РЕДАКТИРОВАТЬ: я обнаружил, что на самом деле вам нужно всего лишь вставить одно пустое поле электронной почты в форму (вы можете скрыть его с помощью display: none) перед другими полями, чтобы предотвратить автозаполнение. Я предполагаю, что chrome хранит какую-то сигнатуру формы с каждым полем автозаполнения, а включение другого поля электронной почты портит эту подпись и предотвращает автозаполнение.

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

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

Старый ответ:

Единственное, что я нахожу все еще жизнеспособным, - это вставить два пустых поля типа email и пароль перед реальными полями. Вы можете установить их на display: none чтобы скрыть их (это не достаточно умно, чтобы игнорировать эти поля):

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

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

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

---

Обратите внимание, что очистка значения с помощью Javascript позволяет переопределить автозаполнение. Поэтому, если допустимо потерять правильное поведение с отключенным JS, вы можете упростить все это с помощью автозаполнения JS "polyfill" для Chrome:

(function(document) {

    function polyfillAutocomplete(nodes) {

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

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

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

    setTimeout(function() {

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

    }, 1);

})(window.document);

Answer 3

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

Chrome полностью игнорирует autocomplete="off". Хотя JS-хаки могут хорошо работать, я нашел простой способ, который работает во время написания:

Установите значение поля пароля для управляющего символа 8 ("\x08" в PHP или  в HTML). Это останавливает автоматическое заполнение поля Chrome, поскольку оно имеет значение, но фактическое значение не вводится, поскольку это символ возврата.

Да, это все еще взлом, но это работает для меня. YMMV.

Answer 4

Chrome постоянно меняет способ обработки автозаполнения в каждой версии, как и я, чтобы сделать поля только для чтения, а onclick/focus - не только для чтения. попробуйте этот фрагмент jQuery.

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload

 $('input, :input').on( 'click focus', function(){ //on input click
 $('input, :input').attr('readonly',true);//make other fields readonly
 $( this ).attr('readonly',false);//but make this field Not readonly
 });
//======./fix for autocomplete
});

Answer 5

Я только что обновился до Chrome 49, и решение Diogo Cid больше не работает.

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

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

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

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

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

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

Я знаю, что это может показаться не очень элегантным, но это работает.

Answer 6

После того, как вы попробовали все решения, вот то, что, кажется, работает для версии Chrome:45, с формой, имеющей поле пароля:

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

Answer 7

Ответ 2021 года: К сожалению, единственное, что работает, отвратительно хакерское. Мое решение - добавить динамически генерируемое случайное число в конец атрибута имени (например, <input name="postcode-22643"...) при создании разметки интерфейса. На данный момент это обманывает браузер.

Затем вам нужно будет добавить что-то на стороне сервера, чтобы очистить входящий почтовый запрос. Например, в NodeJS / Express я поместил промежуточное ПО с небольшим количеством регулярного выражения, чтобы удалить сегмент числа из полученного почтового запроса. Мой выглядит так, но я полагаю, что что-то очень похожее будет доступно на других языках:

      const cleanseAutosuggest = function (req, res, next) {
   for (const key in req.body) {
      if (key.match(/-\d+/)) {
         req.body[key.replace(/-\d+/, "")] = req.body[key];
         delete req.body[key];
      }
   }
   next();
};

app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})

Answer 8

У меня есть ОЧЕНЬ простое решение этой проблемы, не требующее кода и приемлемое решение. Chrome часто читает метку ввода и выполняет автозаполнение. Вы можете просто вставить в метку «пустой» символ.

      E.g. <label>Surname</labe>

Becomes: <label>Sur&#8205;name</label>

‍ — управляющий символ HTML для «пустой строки».

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

Answer 9

autocomplete="off" работает сейчас, так что вы можете просто сделать следующее:

<input id="firstName2" name="firstName2" autocomplete="off">

Протестировано в текущем Chrome 70, а также во всех версиях, начиная с Chrome 62.

Демо

ОБНОВЛЕНИЕ: Так как люди склонны понижать это (см., Например, комментарий Anton Kuznetsov внизу) перед чтением демонстрации в JSFiddle или на самом деле изучением HTML-кода JSFiddle, я должен выразить это ясно:

• вершина input имеет автоматическое завершение работы
• дно input автоматическое завершение отключено путем добавления autocomplete="off"

Answer 10

Для меня установка autocomplete="off" в форме и вводах работала. Но можно расслоить. Иногда он предлагает пароль или сохраненный вариант логина + пароля. Но не приходите заранее заполненными.

Версия Chrome: 81.0.4044.138

CodePen

<form role="form" method="post" action="#" autocomplete="off">
  <label for="login">Login</label><br/>
  <input type="text" name="login" id="login" autocomplete="off" />
  <br/><br/>
  <label for="password">Password</label><br/>
  <input type="password" name="password" autocomplete="off" />
  <br/><br/>
  <input type="submit" name="submit" value="Submit" />
</form>

Другие варианты:

1. Удалите тег 'form'... или измените его с 'div' на 'form' перед отправкой.
2. С javascript и некоторыми полями contentEditable="true" вы могли бы пробиться...

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

Answer 11

После долгих поисков я обнаружил, что раскрывающийся список автозаполнения в Chrome(версия 83.0.4103.116) не отображается, когда мы удаляем атрибут name и id во входном теге, например. код, как показано ниже

Answer 12

Я решил по-другому. Вы можете попробовать это.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

Answer 13

Единственное решение, которое сработало и успешно протестировано в Chrome и Firefox, — это обернутьinputсformкоторый имеетautocomplete="off"как показано ниже:

      <form autocomplete="off">
   <input id="xyz" />
</form>

Answer 14

Я нашел это решение наиболее подходящим:

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

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

Answer 15

Кажется, что событие автозаполнения Chrome запускаетсяDOMContentLoaded, а в последней версии Chrome (110.0.5481.178) теперь игнорируетautocomplete="nope"иautocomplete="new-password"или случайный атрибут, поэтому, если вы не хотите использовать трюк только для чтения или другие случайные вещи JQuery и Js, вы можете просто установить входные данные (в основном электронная почта, пароль и телефон) в текст и в случае просто переустановить на правильный тип, это должно быть не менее 1 мс после события, потому что, если это будет сделано немедленно, оно будет автоматически завершено браузером, поэтому просто выполните этот трюк:

Установите вход наtypeв «текст» и сохранить реальный тип в каком-либо атрибуте или классе, например whis:

      <input type="text" id="infoEmail" placeholder="[e-mail]" data-on-load-type="email">

Потом в окнеloadсобытие использоватьsetTimeoutфункция и это сделано, ввод будет иметь правильный тип и не будет автозаполнения

      window.addEventListenner('load', ()=>{
    document.querySelectorAll('input[data-on-load-type]').forEach(trickedInput=>{
        trickedInput.setAttribute('type', trickedInput.getAttribute('data-on-load-type'))
    });
});

Изменить: просто хочу добавить больше информации о том, как работает автозаполнение.

Автозаполнение происходит в большинстве случаев, когда это пароль и, по крайней мере, другой элемент ввода в DOM, браузер будет рассматривать все возможное как автозаполнение, даже если они не находятся в<form>тег или имеетautocompleteатрибут nope или new-password, поэтому, если будет найден ввод пароля и любой другой автозаполняемый ввод, такой как электронная почта, телефон или адрес, они будут автоматически заполнены, но не в том случае, если они имеютdisplay: none;поэтому браузер в любом случае попытается заполнить любой другой видимый элемент ввода, даже если он не связан с контактной формой или формой входа, например, поиск ввода в строке поиска, и если у вас есть скрипт для отображения ввода, иногда они будут автозаполнены если входной пароль находится в DOM, так что это большая проблема, и браузеры должны уважать, когда что-то не должно быть автозаполненным. Итак, как только браузер узнает, что в DOM есть входной пароль, он, кажется, прикрепляет прослушиватель к автозаполненным вводам, когда они меняют свое отображение, поэтому я нашел это решение, установив тип текста, а затем изменив его на правильный тип с помощью небольшая задержка после события загрузки, на данный момент это работает довольно хорошо.

Answer 16

МАРТ 2020

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

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

$('#password').on('click', function (event) {
  $('#password').removeAttr('readonly');
  $('#password').focus();
});

$('#password').on('blur', function (event) {
  $('#password').attr('readonly', 'readonly');
});

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

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

Answer 17

Уловка скрытого элемента ввода по-прежнему работает (Chrome 43) для предотвращения автозаполнения, но следует помнить, что Chrome попытается выполнить автозаполнение на основе тега-заполнителя. Вам необходимо сопоставить заполнитель скрытого элемента ввода с тем входом, который вы пытаетесь отключить.

В моем случае у меня было поле с текстом заполнителя 'City or Zip', которое я использовал с автозаполнением Google Place. Оказалось, что он пытался выполнить автозаполнение, как если бы он был частью формы адреса. Трюк не сработал, пока я не наложил тот же заполнитель на скрытый элемент, что и на реальный ввод:

<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />

Answer 18

Ни один из этих методов больше не работает, хром игнорирует все эти атрибуты, единственное решение - использовать jquery

использовать это на входе

<input onclick="$(this).removeAttr('readonly');" onblur="$(this).attr('readonly', true);" readonly />

Answer 19

Похоже, это исправлено! Смотрите https://codereview.chromium.org/1473733008

Answer 20

При использовании виджета, такого как автозаполнение пользовательского интерфейса jQuery, убедитесь, что он не добавляет / не изменяет атрибут autocomplete на off. Я обнаружил, что это правда при использовании, и это нарушит любую работу, которую вы, возможно, сделали, чтобы переопределить любое кэширование полей браузера. Убедитесь, что у вас есть уникальный атрибут имени и установите уникальный атрибут автозаполнения после инициализации виджета. Ниже приведены некоторые советы о том, как это может работать в вашей ситуации.

<?php $autocomplete = 'off_'.time(); ?>
<script>
   $('#email').autocomplete({
      create: function( event, ui ) {
         $(this).attr('autocomplete','<? echo $autocomplete; ?>');
      },
      source: function (request, response) { //your code here },
      focus: function( event, ui ) { //your code here },
      select: function( event, ui ) { //your code here },
   });
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />

Answer 21

Чтобы предотвратить автозаполнение, просто установите пустое пространство в качестве входного значения:

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

Answer 22

По сути, мы можем избавиться от автозаполнения в любом текстовом поле из Chrome, Firefox или любых браузеров. Это простой javascript.

      window.onload=function(){                                              
        setTimeout(function(){  
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
        },100);
    }  

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

Answer 23

Добавьте это сразу после тега формы:

<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>

Добавьте это к вашему CSS-файлу:

.div-form{
opacity: 0;
}

Answer 24

Я просто нашел уловку:

      <input type="password" id="some_id" name="some_name" value=" " placeholder="Password">

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

Answer 25

2021 Сентябрь Ответ

Поскольку мне пришлось столкнуться с этой проблемой, единственным стабильным рабочим решением было создание случайной строки для name а также autocomplete атрибут в <input> элементов каждый раз при отображении веб-сайта.

Ниже приведена простая демонстрация этого с использованием чистого JavaScript.

HTML:

      <div>
     <h3>Autofill disabled with random string</h3>
     <form id="disable-autofill-form">
       <div>
         <span>First Name</span>
         <input type="text" />
       </div>
       <div>
         <span>Last Name</span>
         <input type="text" />
       </div>
       <div>
         <span>City</span>
         <input type="text" />
       </div>
       <div>
         <span>Street</span>
         <input type="text" />
       </div>
       <div>
         <span>Postal Code</span>
         <input type="text" />
       </div>
     </form>
</div>

JavaScript:

      const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
  ...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
  input.setAttribute('autocomplete', randomString);
  input.setAttribute('name', randomString);
});

Здесь можно найти проект Stackblitz, с которым можно поиграть .

Answer 26

Я использую Chrome - Версия 64.0.3282.140 (Официальная сборка) (64-разрядная версия) и использовал следующий код вместе с именем формы, и он работает для меня.

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>

Answer 27

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

<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />

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

И следующий скрипт при загрузке страницы (этот скрипт использует JQuery):

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

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

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

Answer 28

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

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}

Answer 29

Я только что попробовал следующее, и это похоже на хит в Chrome 53 - он также отключает раскрывающийся список "Использовать пароль для:" при вводе поля пароля.

Просто установите тип ввода пароля на textи затем добавьте onfocus обработчик (встроенный или через JQuery/vanilla JS) для установки типа password:

onfocus="this.setAttribute('type','password')"

Или даже лучше:

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"

Answer 30

У меня была аналогичная проблема с одним из полей поиска в моей форме. ни то, ни другоеautocomplete= "false" ни autocomplete= "off"работал у меня. получается, когда у вас есть атрибут aria-label вinput element установлен на что-то вроде city или address или что-то подобное, Chrome отменяет все ваши настройки и все равно отображает автозаполнение

Итак, исправление, которое я сделал, - это удалить cityчасть от aria-label и придумайте другое значение. и наконец автозаполнение перестало показывать