Как отключить функцию автозаполнения Chrome на определенном <input>, чтобы предотвратить их автоматическое заполнение при загрузке страницы?
В то же время мне нужно включить автозаполнение, так что пользователь все еще может видеть список предложений, нажимая на ввод или введя его. Это можно сделать?
EDIT: Не стесняйтесь использовать простой Javascript или jQuery, если вы считаете, что это необходимо или вы чувствуете, что это упростит ваше решение.
Здесь волшебство, которое вы хотите:
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", который представляет собой специальную функцию автозаполнения хрома. В моем примере хром будет автозаполнять имя, фамилию и адрес электронной почты, а не поле пароля.
Исправить: предотвратить автозаполнение браузера
<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(); }" />
Live Demo https://jsfiddle.net/danielsuess/n0scguv6/
//UpdateEnd
Объяснение Вместо того, чтобы заполнять пробельные или оконные функции, этот фрагмент работает, устанавливая режим readonly и меняя его на запись, если пользователь фокусирует это поле ввода (фокус содержит щелчок мышью и табуляцию через поля).
Не требуется jQuery, чистый JavaScript.
После большой борьбы я обнаружил, что решение намного проще, чем вы могли себе представить:
Вместо autocomplete="off" просто используйте autocomplete="false";)
Попробуйте это...
$(document).ready(function () {
$('input').attr('autocomplete', 'false');
});
Я наткнулся на странное хромовое поведение автозаполнения сегодня. Это случилось, чтобы включить в поля, называемые "embed" и "postpassword" (заполняя логин и пароль) без видимых причин. Эти поля уже отключили автозаполнение.
Ни один из описанных методов не работал. Ни один из методов из другого ответа не работал. Я пришел к своей собственной идее, основываясь на ответе Стил (возможно, это действительно сработало, но я требую формат фиксированных почтовых данных в своем приложении):
Перед реальным паролем добавьте эти два фиктивных поля:
<input type='text' style='display: none'>
<input type='password' style='display: none'>
Только этот, наконец, полностью отключил автозаполнение для моей формы.
Позор, что отключение такого базового поведения - это тяжелый и хакерский.
Я не могу автоматически настроить автозаполнение Chrome на загрузку страницы, чтобы проверить это, но вы можете попробовать добавить autocomplete="off" в свои поля, а затем удалить атрибут при загрузке:
$(window).load(function() { // can also try on document ready
$('input[autocomplete]').removeAttr('autocomplete');
});
Это может помочь: fooobar.com/questions/4238/...
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);
});
});
}
Похоже, что при загрузке он находит все входы с автозаполнением, добавляет их outerHTML и удаляет оригинал, сохраняя при этом значение и имя (легко изменяемое для сохранения идентификатора и т.д.)
Если это сохраняет текст автозаполнения, вы можете просто установить
var text = ""; /* $(this).val(); */
Из первоначальной формы, где это было опубликовано, оно утверждает, что сохраняет автозаполнение.:)
Удачи!
Одним из решений было бы автоматическое заполнение входов пробельными символами и их четкое фокусирование.
Пример: 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>
Недавно я столкнулся с этой проблемой и без простого решения, так как мои поля могут быть предварительно заполнены, я хотел поделиться элегантным взломом, с которым я пришел, установив тип пароля в готовое событие.
Не указывайте свое поле ввода как пароль типа при его создании, но добавьте готовый прослушиватель событий, чтобы добавить его для вас:
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);
autocomplete="off" на вкладке, теперь работающем на Chrome V44 (и Canary V47)
Немного поздно для вечеринки... но это легко сделать с помощью некоторого jQuery:
$(window).on('load', function() {
$('input:-webkit-autofill').each(function() {
$(this).after($(this).clone(true).val('')).remove();
});
});
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
fields.val('');
}, 500);
До сих пор я нашел, что это работает, нужно установить тайм-аут 1 мс для завершения действия после хроматического автозаполнения.
$(window).on('load', function() {
setTimeout(function(){
$('input[name*=email],input[name*=Password]').val('-').val(null);
},1);
});
Мне интересно, есть ли способ привязать эту функцию к обходу самозаполнения хрома или даже обрезать его
Менеджер паролей 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)
Самое простое решение, укажите значение '' для поля имени пользователя (которое вы все равно можете назвать "username" ).
Если значение может быть заполнено введенными пользователем значениями, как обычно бывает для формы, которую вы проверяете, укажите значение '', если оно еще не установлено. В PHP,
if(trim($username) == ''){$username = ' ';}
<input type='text' value = '$username' name = 'Username' />
Я действительно думаю, что автозаполнение имени пользователя и пароля эффективно предоставляет доступ ко всем вашим учетным записям любому, кто обращается к вашему компьютеру, независимо от того, насколько скрыты ваши пароли...
Мое решение основано на пользовательском решении 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;
}
Вот последнее решение, которое я обнаружил. Это не позволяет 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>
Мне не нравится использовать 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-разрядная версия))
Не красивое решение, но работало на Chrome 56:
<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">
Обратите внимание на пробел в значении. И затем:
$(document).ready(function(){
setTimeout("$('#name').val('')",1000);
});
Autofill работает с атрибутом имени ввода, поэтому, если вы задаете имя для ввода типа "firstname", хром заполнит его.
Если вы хотите отключить его, используйте нечетное имя, например "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 />