Автозаполнение формы Google Chrome и ее желтый фон
У меня проблема с дизайном Google Chrome и его функцией автозаполнения формы. Если хром помнит логин/пароль, он меняет цвет фона на желтый.
вот несколько скриншотов:
Как убрать этот фон или просто отключить это автозаполнение ?
27 ответов
измените "белый" на любой цвет, который вы хотите.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
решение здесь:
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);
});
});
}
Если вам нужны прозрачные поля ввода, вы можете использовать переход и задержку перехода.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
-webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}
в Firefox вы можете отключить все автозаполнение в форме, используя атрибут autocomplete="off/on". Аналогично, автозаполнение отдельных элементов может быть установлено с использованием того же атрибута.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
вы можете проверить это в Chrome, как это должно работать.
Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функциональные возможности, прикрепленные к вашим входным элементам, попробуйте этот скрипт:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}
}, 20);
}
он опрашивает, пока не найдет любые элементы автозаполнения, клонирует их, включая данные и события, затем вставляет их в DOM в том же месте и удаляет оригинал. Он прекращает опрос, как только находит клонирование, так как автозаполнение иногда занимает секунду после загрузки страницы. Это вариант предыдущего образца кода, но более надежный и сохраняет как можно больше функциональности нетронутыми.
(подтверждена работа в Chrome, Firefox и IE 8.)
следующий CSS удаляет желтый цвет фона и заменяет его цветом фона по вашему выбору. Он не отключает автозаполнение и не требует взломов jQuery или Javascript.
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
-webkit-text-fill-color: #333;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
-webkit-text-fill-color: #333;
}
решение скопировано с: переопределить заполнение формы браузера и подсветку ввода с помощью HTML / CSS
работал для меня, требуется только изменение css.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
вы можете поместить любой цвет вместо #ffffff.
это устраняет проблему как в Safari, так и в Chrome
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
}
немного hacky, но отлично работает для меня
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
комбинация ответов сработала для меня
<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
-webkit-text-fill-color: white !important;
}
</style>
вот версия MooTools Джейсона. Исправляет это в Safari тоже.
window.addEvent('domready',function() {
$('username').focus();
if ((navigator.userAgent.toLowerCase().indexOf(\"chrome\") >= 0)||(navigator.userAgent.toLowerCase().indexOf(\"safari\") >= 0))
{
var _interval = window.setInterval(function ()
{
var autofills = $$('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function(el)
{
var clone = el.clone(true,true).inject(el,'after');;
el.dispose();
});
}
}, 20);
}
});
это помогло мне, только версия CSS.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
здесь белый может быть любой цвет вы хотите.
Я пользуюсь этим,
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
input:focus:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/* You can use color:#color to change the color */
в вашем теге просто вставьте эту небольшую строку кода.
autocomplete="off"
однако не помещайте это в поле username/email/idname, потому что, если вы все еще хотите использовать автозаполнение, оно отключит его для этого поля. Но я нашел способ обойти это, просто поместите код в тег ввода пароля, потому что вы никогда не автозаполнение паролей в любом случае. Это исправление должно удалить силу цвета, возможность автозаполнения matinain в поле электронной почты / имени пользователя и позволяет избежать громоздкие хаки, такие как Jquery или javascript.
Если вы хотите избавиться от него полностью, я скорректировал код в предыдущих ответах, чтобы он работал на наведении, активном и фокусе:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
вот решение Mootools делает то же самое , что и у Алессандро-заменяет каждый затронутый вход новым.
if (Browser.chrome) {
$$('input:-webkit-autofill').each(function(item) {
var text = item.value;
var name = item.get('name');
var newEl = new Element('input');
newEl.set('name', name);
newEl.value = text;
newEl.replaces(item);
});
}
Как насчет такого решения:
if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');
inputs.attr('autocomplete', 'off');
setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}
он отключает автозаполнение и автозаполнение (поэтому желтые фоны исчезают), ждет 100 миллисекунд, а затем возвращает функцию автозаполнения без автозаполнения.
Если у вас есть входные данные, которые должны быть автоматически заполнены, то дайте им auto-complete-on
класс css.
ни одно из решений не работало для меня, входы имени пользователя и пароля все еще заполнялись и давали желтый фон.
поэтому я спросил себя: "как Chrome определяет, что должно быть заполнено на данной странице?"
" ищет ли он идентификаторы ввода, имена ввода? Форма удостоверения? Форма действия?"
благодаря моим экспериментам с именем пользователя и вводом пароля, было только два способа, которые я нашел, что бы Chrome не смог найти поля, которые должны быть заполнены автоматически:
1) Поместите ввод пароля перед вводом текста. 2) Дайте им то же имя и id ... или без имени и документов.
после загрузки страницы с помощью javascript вы можете либо изменить порядок ввода на странице, либо динамически дать им свое имя и идентификатор ...
и Chrome не знает, что его ударило ... автозаполнение выключено.
сумасшедший Хак, я знаю. Но это работает на меня.
Chrome 34.0.1847.116, OSX 10.7.5
единственный способ, который работает для меня: (требуется jQuery)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
я исправил эту проблему для поля пароля, которое у меня есть так:
Установите тип ввода в текст вместо пароля
удалите входное текстовое значение с помощью jQuery
преобразовать тип ввода в пароль с помощью jQuery
<input type="text" class="remove-autofill">
$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');
обновление решения Arjans. При попытке изменить значения он не позволит вам. Меня это устраивает. Когда вы фокусируетесь на входе, он становится желтым. достаточно близко.
$(document).ready(function (){
if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
var id = window.setInterval(function(){
$('input:-webkit-autofill').each(function(){
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
});
}, 20);
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
}
});
$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
попробуйте этот код:
$(function(){
setTimeout(function(){
$('[name=user_password]').attr('type', 'password');
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input name="user_password" type="password">
Фарид namrouti ответ правильный. Но фон все равно становится желтым, когда входной сигнал выбран. Добавление !important
исправить проблему. Если вы хотите также textarea
и select
С таким же поведением просто добавить textarea:-webkit-autofill, select:-webkit-autofill
единственной
input:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
ввод, выбор, textarea
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
}
добавлять autocomplete="off"
не прокатит.
изменить атрибут типа ввода на type="search"
.
Google не применяет автозаполнение к входам с типом поиска.
надеюсь, это сэкономит вам время.
окончательное решение:
$(document).ready(function(){
var contadorInterval = 0;
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
var _interval = window.setInterval(function ()
{
var autofills = $('input:-webkit-autofill');
if (autofills.length > 0)
{
window.clearInterval(_interval); // stop polling
autofills.each(function()
{
var clone = $(this).clone(true, true);
$(this).after(clone).remove();
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},10);
});
}
contadorInterval++;
if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
}, 20);
}else{
setTimeout(function(){
// $("#User").val('');
$("#Password").val('');
},100);
}
});
<input type="text" name="foo" autocomplete="off" />
Аналогичный Вопрос: ссылке