Можно ли использовать CSS для отключения автозаполнения элемента формы (в частности, текстового поля)?
Я использую библиотеку тегов, которая не допускает элемент автозаполнения, и я хотел бы отключить автозаполнение без использования Javascript.
Можно ли использовать CSS для отключения автозаполнения элемента формы (в частности, текстового поля)?
Я использую библиотеку тегов, которая не допускает элемент автозаполнения, и я хотел бы отключить автозаполнение без использования Javascript.
Вы можете использовать сгенерированные id
и name
каждый раз, что отличается, поэтому браузер не может запомнить это текстовое поле и не сможет предложить некоторые значения.
Это, по крайней мере, альтернатива перекрестного браузера, но я бы рекомендовал пойти с ответа от RobertsonM (autocomplete="off"
).
В своем роде в CSS нет атрибута autocomplete off. Однако html имеет простой код для этого:
<input type="text" id="foo" value="bar" autocomplete="off" />
Если вы ищете эффектор для всего сайта, легко будет просто запустить функцию js через все "входные данные" и добавить этот тег или искать соответствующий класс /id css.
Атрибут autocomplete отлично работает в Chrome и Firefox (!), но см. также Есть ли допустимый способ W3C отключить автозаполнение в HTML-форме?
вы можете легко реализовать jQuery
$('input').attr('autocomplete','off');
Если вы используете form
, вы можете отключить все автозаполнения с помощью
<form id="Form1" runat="server" autocomplete="off">
CSS не обладает этой способностью. Вам нужно будет использовать скрипты на стороне клиента.
Я попробовал все предложенные способы из ответов на этот вопрос и других статей в Интернете, но все равно не работал. Я попытался autocomplete = "new-random-value", autocomplete = "off" в элементе формы, используя клиентский скрипт, как показано ниже, но за пределами $ (document).ready(), как один из упомянутых пользователей:
$(':input').on('focus', function () {
$(this).attr('autocomplete', 'off')
});
Я обнаружил, что, возможно, другой приоритет в браузере вызывает такое странное поведение! Поэтому я продолжил поиск и, наконец, внимательно прочитал следующие строки из этой хорошей статьи:
По этой причине многие современные браузеры не поддерживают autocomplete = "off" для полей входа в систему:
Если сайт устанавливает autocomplete = "off" для a, и форма включает поля ввода имени пользователя и пароля, тогда браузер все равно предложит запомнить этот логин, и если пользователь согласится, браузер Заполните эти поля при следующем посещении страницы пользователем. Если сайт устанавливает autocomplete = "off" для полей имени пользователя и пароля, тогда браузер все равно предложит запомнить этот логин, и если Пользователь соглашается, что браузер автоматически заполнит эти поля в следующий раз пользователь заходит на страницу. Это поведение в Firefox (начиная с версии 38), Google Chrome (с 34) и Internet Explorer (с версии) 11).
Если вы определяете страницу управления пользователями, где пользователь может указать новый пароль для другого человека, и поэтому вы хотите предотвратить автозаполнение полей пароля, вы можете использовать автозаполнение = "новый пароль"; однако поддержка этого значения не была реализована в Firefox.
Это просто сработало. Я попробовал в Chrome специально, и я надеюсь, что это продолжает работать и помогать другим.
Я решил проблему, добавив поддельное имя автозаполнения для всех входных данных.
$("input").attr("autocomplete", "fake-name-disable-autofill");
Благодаря @ahhmarr я смог решить ту же проблему в моем Angular + ui-router > среда, которую я поделюсь здесь для тех, кто интересуется.
В моем index.html
я добавил следующий script:
<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.
Если вы найдете лучшее решение, сообщите мне.
Вы не можете использовать CSS для отключения автозаполнения, но вы можете использовать HTML:
<input type="text" autocomplete="false" />
Технически вы можете заменить false
на любое недопустимое значение, и оно будет работать. Эта iOS единственное решение, которое я нашел, которое также работает в Edge.
$('input').attr('autocomplete','off');