Отключить автозаполнение форм в Chrome без отключения автозаполнения
Как мы можем отключить функцию автозаполнения Chrome на некоторых <input>s, чтобы предотвратить их автоматическое заполнение при загрузке страницы?
В то же время мне нужно оставить автозаполнение включенным, чтобы пользователь по-прежнему мог видеть список предложений, нажимая на ввод или вводя его. Можно ли это сделать?
РЕДАКТИРОВАТЬ: не стесняйтесь использовать простой Javascript или jQuery, если вы чувствуете, что это необходимо, или вы чувствуете, что это сделает ваше решение проще.
21 ответ
Вот волшебство, которое вы хотите:
autocomplete="new-password"
Chrome намеренно игнорирует autocomplete="off" а также autocomplete="false", Тем не менее, они положили new-password в качестве специального предложения, чтобы не допустить автоматического заполнения новых паролей.
Я поместил вышеуказанную строку в свой ввод пароля, и теперь я могу редактировать другие поля в моей форме, и пароль не заполняется автоматически.
Немного поздно, но вот мое надежное решение, полезное для таких страниц, как страница регистрации / регистрации, где пользователь должен ввести новый пароль.
<form method="post">
<input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
<input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
<input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
<input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
<input type="password" name="password" id="password" autocomplete="off">
</form>
Chrome обнаружит два ввода пароля и не будет автоматически заполнять поля пароля. Однако поле id="password_fake" будет скрыто через CSS. Таким образом, пользователь увидит только одно поле пароля.
Я также добавил некоторые дополнительные атрибуты "x-autocompletetype", которые являются специфической для Chrome функцией автоматического заполнения. Из моего примера, Chrome будет автоматически заполнять имя, фамилию и адрес электронной почты, а НЕ поле пароля.
Исправлено: предотвращение автозаполнения браузера в
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Обновление: Mobile Safari устанавливает курсор в поле, но не показывает виртуальную клавиатуру. Новое исправление работает, как и раньше, но обрабатывает виртуальную клавиатуру:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Демонстрационная версия https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
Пояснение Вместо того, чтобы заполнять пробелы или функции окна при загрузке, этот фрагмент работает, устанавливая режим только для чтения и изменяя его на доступный для записи, если пользователь фокусирует это поле ввода (фокус содержит щелчок мыши и переход по полям).
Нет необходимости в jQuery, чистый JavaScript.
После долгой борьбы я обнаружил, что решение намного проще, чем вы можете себе представить:
Вместо autocomplete="off" просто используйте autocomplete="false";)
Попробуй это...
$(document).ready(function () {
$('input').attr('autocomplete', 'false');
});
Я наткнулся на странное поведение автозаполнения Chrome сегодня. Это случилось, чтобы включить в полях, названных: "embed" и "postpassword" (заполнив там логин и пароль) без видимой причины. Эти поля уже отключены для автозаполнения.
Ни один из описанных методов, казалось, не работал. Ни один из методов из другого ответа не сработал. Я пришел к своей собственной идее, основываясь на ответе Стила (возможно, он действительно сработал, но мне требуется фиксированный формат данных поста в моем приложении):
Перед реальным паролем добавьте два пустых поля:
<input type='text' style='display: none'>
<input type='password' style='display: none'>
Только этот наконец отключил автозаполнение для моей формы.
Обидно, что отключение такого базового поведения - это тяжело и хакерски.
Не красивое решение, но работало на Chrome 56:
<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">
Обратите внимание на пробел в значении. А потом:
$(document).ready(function(){
setTimeout("$('#name').val('')",1000);
});
Я не могу заставить мой Chrome автоматически заполняться при загрузке страницы, чтобы проверить это, но вы можете попробовать добавить autocomplete="off" в ваши поля, затем удаляем атрибут при загрузке:
$(window).load(function() { // can also try on document ready
$('input[autocomplete]').removeAttr('autocomplete');
});
Это может помочь: /questions/15982228/forma-avtozapolneniya-google-chrome-i-ee-zheltyij-fon/15982245#15982245
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
Он выглядит как при загрузке, он находит все входные данные с автозаполнением, добавляет их externalHTML и удаляет оригинал, сохраняя при этом значение и имя (его легко изменить, чтобы сохранить идентификатор и т. Д.)
Если это сохраняет текст автозаполнения, вы можете просто установить
var text = ""; /* $(this).val(); */
От оригинальной формы, где это было отправлено, это утверждает, что сохранило автозаполнение.:)
Удачи!
Недавно я столкнулся с этой проблемой, и не имея простого решения, поскольку мои поля могут быть предварительно заполнены, я хотел поделиться элегантным хаком, который придумал, установив тип пароля в событии ready.
Не объявляйте поле ввода как тип пароля при его создании, но добавьте готовый прослушиватель событий, чтобы добавить его для вас:
function createSecretTextInput(name,parent){
var createInput = document.createElement("input");
createInput.setAttribute('name', name);
createInput.setAttribute('class', 'secretText');
createInput.setAttribute('id', name+'SecretText');
createInput.setAttribute('value', 'test1234');
if(parent==null)
document.body.appendChild(createInput);
else
document.getElementById(parent).appendChild(createInput);
$(function(){
document.getElementById(name+'SecretText').setAttribute('type', 'password');
});
};
createSecretTextInput('name', null);
Одним из решений было бы автоматическое заполнение входных данных пробельными символами, чтобы они были четко сфокусированы.
Пример: http://nfdb.net/autofill.php
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield;
// After the document has loaded, manipulate DOM elements.
window.addEventListener('load', function() {
// Get the username field element.
userfield = document.getElementById('user');
// Listen to the 'focus' event on the input element.
userfield.addEventListener('focus', function() {
// Checks if the value is the EM space character,
// and removes it when the input is recieves focus.
if (this.value == '\u2003') this.value = ''
}, false);
// Listen to the 'blur' event on the input element.
// Triggered when the user focuses on another element or window.
userfield.addEventListener('blur', function() {
// Checks if the value is empty (the user hasn't typed)
// and inserts the EM space character if necessary.
if (this.value == '') this.value = '\u2003';
}, false);
}, false);
</script>
</head>
<body>
<form method="GET" action="">
<input id="user" name="username" type="text" value=" "/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
Это должно помешать браузеру автоматически заполнять поля, но все же разрешать их автоматическое заполнение.
Вот еще один пример, который очищает входные данные формы после загрузки страницы. Преимущество этого метода заключается в том, что входные данные никогда не содержат пробельных символов, недостатком является небольшая вероятность того, что автоматически заполненные значения будут видны в течение нескольких миллисекунд.
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield, passfield;
// Wait for the document to load, then call the clear function.
window.addEventListener('load', function() {
// Get the fields we want to clear.
userfield = document.getElementById('user');
passfield = document.getElementById('pass');
// Clear the fields.
userfield.value = '';
passfield.value = '';
// Clear the fields again after a very short period of time, in case the auto-complete is delayed.
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);
}, false);
</script>
</head>
<body>
<div>This form has autofill disabled:</div>
<form name="login" method="GET" action="./autofill2.php">
<input id="user" name="username" type="text" value=""/><br/>
<input id="pass" name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
<div>This form is untouched:</div>
<form name="login" method="GET" action="./autofill2.php">
<input name="username" type="text" value=""/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
autocomplete="off" на входе сейчас работает Chrome V44 (и Canary V47)
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
fields.val('');
}, 500);
Я не люблю использовать setTimeout или даже иметь странные временные входы. Так что я придумал это.
Просто измените свой тип поля пароля на текст
<input name="password" type="text" value="">
И когда пользователь фокусируется на этом вводе, измените его снова на пароль
$('input[name=password]').on('focus', function (e) {
$(e.target).attr('type', 'password');
});
Работает с использованием последней версии Chrome (версия 54.0.2840.71 (64-разрядная версия)).
Немного опоздал на вечеринку... но это легко сделать с помощью некоторого jQuery:
$(window).on('load', function() {
$('input:-webkit-autofill').each(function() {
$(this).after($(this).clone(true).val('')).remove();
});
});
Pros
- Удаляет автозаполнение текста и цвет фона.
- Сохраняет автозаполнение на поле.
- Сохраняет любые события / данные, связанные с элементом ввода.
Cons
- Быстрая прошивка автозаполненного поля при загрузке страницы.
Мое решение основано на пользовательском решении dsuess, которое не работало в IE для меня, потому что мне пришлось щелкнуть еще раз в текстовом поле, чтобы набрать текст. Поэтому я адаптировал его только для Chrome:
$(window).on('load', function () {
if (navigator.userAgent.indexOf("Chrome") != -1) {
$('#myTextBox').attr('readonly', 'true');
$('#myTextBox').addClass("forceWhiteBackground");
$('#myTextBox').focus(function () {
$('#myTextBox').removeAttr('readonly');
$('#myTextBox').removeClass('forceWhiteBackground');
});
}
});
В вашем CSS добавить это:
.forceWhiteBackground {
background-color:white !important;
}
Самое простое решение, предоставить значение '' для поля имени пользователя (которое вы все еще можете назвать 'username').
Если значение может быть заполнено введенными пользователем значениями, как это обычно происходит для формы, которую вы проверяете, укажите значение '', если оно еще не установлено. В PHP
if(trim($username) == ''){$username = ' ';}
<input type='text' value = '$username' name = 'Username' />
Я на самом деле думаю, что автозаполнение имени пользователя и пароля эффективно предоставляет доступ ко всем вашим учетным записям всем, кто обращается к вашему компьютеру, независимо от того, насколько непонятны ваши пароли...
Менеджер паролей Chrome ищет элементы ввода с type="password" и заполните сохраненный пароль. Это также игнорирует autocomplete="off" имущество.
Вот исправление для последней версии Chrome (версия 40.0.2181.0 канарейка):
<input name="password">
JS:
setTimeout(function() {
var input = document.querySelector("input[name=password]");
input.setAttribute("type", "password");
}, 0)
До сих пор я обнаружил, что это работает, нужно установить Тайм-аут в 1 мс для завершения действия после автозаполнения Chrome.
$(window).on('load', function() {
setTimeout(function(){
$('input[name*=email],input[name*=Password]').val('-').val(null);
},1);
});
Мне интересно, есть ли какой-нибудь способ прикрепить эту функцию к запуску самозавершения chrome, или даже изменить его
Вот последнее решение, которое я обнаружил. Это останавливает Google, заполняющий поля и подсвечивающий их желтым цветом, прежде чем вы что-либо напечатаете. По сути, если вы добавите "display: none" в поле, Google будет достаточно умен, чтобы игнорировать его и перейти к следующему полю. Если вы добавите "видимость: скрытый", он будет считаться полем в форме, которая, кажется, мешает его вычислениям. Нет необходимости в JavaScript.
<form method='post'>
<input type='text' name='u' size='16'/>
<input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
<input type='password' name='p' size='16'/>
</form>
Автозаполнение работает с атрибутом имени ввода, поэтому, если вы установите имя для ввода, например "firstname", Chrome заполнит его.
Если вы хотите отключить его, используйте нечетное имя, например "supermanname".
Javascript не может решить вашу проблему.
Второе решение: вы можете скрыть свои входные данные с одинаковыми именами и установить их значения с другими входными данными. Я упростил Js с помощью jQUery.
<form action="handlerfile.php" method="post">
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/>
<input type="hidden" name="username" id="2">
</form>
Вам лучше использовать отключено для ваших входов, чтобы предотвратить автозаполнение.
<input type="password" ... disabled />