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

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

+2639
источник поделиться
74 ответа
  • 1
  • 2
  • 3

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

  1. Установите для атрибута автозаполнения формы значение off
  2. Добавьте фиктивное поле ввода и установите для его атрибута также значение off.
<form autocomplete="off">
 <input type="text" autocomplete="off" style="display:none">
</form>
+1
источник

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

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

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

+1
источник

Легко взломать

Сделать ввод только для чтения

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

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

$(function() {
        setTimeout(function() {
            $('input[name="name"]').prop('readonly', false);
        }, 50);
    });
+1
источник

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

0
источник

мы можем использовать jquery для этого для всех браузеров, и есть плагин для этого https://github.com/terrylinooo/jquery.disableAutoFill. Это упрощает работу и в то же время для всех браузеров

0
источник

Попробуйте добавить фиктивный <input type="text" style="display: none"/> перед вторым вводом.

0
источник

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

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

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

0
источник

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

.my-input {
  position: relative;
  width: auto;
  display: inline-block;
}

.my-input input:not(:disabled) ~ .autofill-hack {
  cursor: text;
}

.autofill-hack {
  outline: 1px solid blue;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
<form>
  <div id="elemId" class='my-input'>
    <!--autocomplete attr is not required, set just for example-->
    <input placeholder='no suggestions please!' name='firstName' autocomplete='family-name' />
    <div 
         tabindex='-1' 
         class='autofill-hack'
         onfocus="elemId.querySelector('input').focus()"
    ></div>
  </div>
  
  <p>This aproach works fine without any id set to input, when you use some framework, which allows you to create a component with own input. So you can use some ref + hit focus with js inside focus handler.</p>
</form

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

0
источник

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

Обе страницы имеют поля name="user_name" и name="user_password". Таким образом, на странице входа в систему администратор сохраняет свои данные для входа, а на второй странице (в области администрирования) поля заполнены его данными, потому что он только что сохранил до...

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

<input type="text" name="user_name" disabled="disabled" style="display:none">
<input type="password" name="user_password" disabled="disabled" style="display:none">

В этом случае источник страницы содержит 2 поля с name="user_name" и 2 поля с name="user_password", но первые поля disabled="disabled" и браузер не будет отправлять их в запросе, но он по-прежнему пытается автозаполнить их, что мне все равно :)

0
источник

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

0
источник

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

<script>
var randomicAtomic = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  $('input[type=text]').attr('autocomplete',randomicAtomic);
</script>
0
источник

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

поставить 2 ложных ввода перед вашим входом

<input class="hidden" type="text" style="display: none!important; visibility: hidden!important;" ></input>
<input class="hidden" type="password" style="display: none!important; visibility: hidden!important;" ></input>
0
источник

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

<input autocomplete="on|off">

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

Chrome 17,0 & последний IE 5.0 & последнее
Firefox 4.0 & последнее
Safari 5.2 & последнее
Opera 9.6 & последний

0
источник

Почему вы делаете свою жизнь менее удобной?

"Пароли/данные кредитной карты и т.д. не должны быть сохранены" - это плохой аргумент: при автозаполнении браузеры в Mac OS X хранят такие значения в зашифрованной базе данных с разрешениями для каждого приложения. И наоборот, каков реалистичный эффект autocomplete=off? Пользователь собирается записать его в незашифрованном текстовом файле или, еще лучше, на заметку, прикрепленную к экрану.

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

Серьезно, я настоятельно призываю вас пересмотреть использование этого атрибута. Это никому не выгодно.
-23
источник
  • 1
  • 2
  • 3

Посмотрите другие вопросы по меткам или Задайте вопрос