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

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

2541
05 авг. '08 в 19:22
источник поделиться
67 ответов
  • 1
  • 2
  • 3

Ни один из предоставленных ответов не работал во всех проверенных вами браузерах. Основываясь на уже предоставленных ответах, это то, к чему я пришел (протестирован) на 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>
1
22 нояб. '17 в 11:28
источник

наконец, я получил решение сначала добавить 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 в 15:07
источник

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

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

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

.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 в 17:37
источник

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

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

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

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

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

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

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

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

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

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

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