Отключить автозаполнение с помощью CSS

можно ли использовать CSS для отключения автозаполнения элемента формы (в частности, текстового поля)?

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

8 71
html css html-form

8 ответов:

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

Это, по крайней мере, кросс-браузер безопасная альтернатива, но я бы рекомендовал пойти с ответом от RobertsonM (autocomplete="off").

36

как он стоит, в CSS нет атрибута 'autocomplete off'. Однако html имеет простой код для этого:

<input type="text" id="foo" value="bar" autocomplete="off" />

Если вы ищете эффектор для всего сайта, легко было бы просто иметь функцию js для запуска всех "входных" и добавления этого тега или поиска соответствующего класса / идентификатора css.

атрибут автозаполнения отлично работает в Chrome и Firefox (!), но Смотрите также есть ли W3C допустимый способ отключить автозаполнение в HTML форма?

111

вы можете легко реализовать с помощью jQuery

$('input').attr('autocomplete','off');
45

Если вы используете form вы можете отключить все autocompletes с,

<form id="Form1" runat="server" autocomplete="off">
14

CSS не имеет этой способности. Вам нужно будет использовать сценарии на стороне клиента.

12

Я пробовал все предложенные способы из ответов на этот вопрос и других статей в интернете, но все равно не работал. Я попробовал autocomplete= "new-random-value", autocomplete=" off " в элементе формы, используя клиентский скрипт, как показано ниже, но за пределами $(document).ready() как один из упомянутых пользователей:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

Я нашел, может быть, еще один приоритет в браузере вызвать это странное поведение! Поэтому я искал больше и, наконец, я снова внимательно прочитал ниже строки из это хорошо статья:

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

Если сайт устанавливает autocomplete= " off " для a , и форма включает в себя поля ввода имени пользователя и пароля, то браузер все равно предложит чтобы запомнить этот логин, и если пользователь согласен, браузер будет автозаполнение этих полей при следующем посещении страницы пользователем. Если сайт устанавливает автозаполнение= "выкл" для полей имени пользователя и пароля, тогда браузер все равно предложит запомнить этот логин, и если пользователь соглашается, браузер будет автоматически заполнять эти поля в следующий раз пользователь заходит на страницу. Это поведение в Firefox (начиная с версии 38), Google Chrome (с 34) и Internet Explorer (с версии 11).

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

это просто сработало. Я пробовал в Chrome специально и я надеюсь, что это продолжает работать и помогать другим.

3

спасибо @ahhmarr это!--5--> решение я смог решить ту же проблему в моем угловой + ui-маршрутизатор среда, которой я поделюсь здесь для тех, кто заинтересован.

в своем index.html я добавил следующий скрипт:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

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

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

тайм-ауты предназначены для отображения html перед применением jquery.

Если вы найдете лучше решение, Пожалуйста, дайте мне знать.

1
$('input').attr('autocomplete','off');
-3