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

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

+2580
05 авг. '08 в 16:22
источник поделиться
69 ответов
  • 1
  • 2
  • 3

наконец, я получил решение сначала добавить 2 скрытых текстовых поля

и просто добавьте угловую директиву, подобную этой

 (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" изначально

+1
26 мар. '18 в 12:07
источник

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

0
13 окт. '18 в 9:38
источник

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

Обе страницы имеют поля 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
14 июл. '19 в 2:43
источник

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

0
22 янв. '19 в 4:01
источник

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

.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
17 мая '19 в 14:37
источник

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

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

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

0
19 апр. '19 в 12:51
источник

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

0
19 мар. '18 в 12:18
источник

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

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

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

0
12 июл. '19 в 6:40
источник

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

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

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

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

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