У меня проблема с дизайном в Google Chrome и функция автозаполнения формы. Если Chrome запоминает некоторые логин/пароль, он меняет цвет фона на желтый.
Вот несколько скриншотов:
Как удалить этот фон или просто отключить это автозаполнение?
Автозаполнение формы Google Chrome и его желтый фон
Ответ 1
Измените "белый" на любой желаемый цвет.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
Ответ 2
Решение здесь:
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);
});
});
}
Ответ 3
Если вам нужны прозрачные поля ввода, вы можете использовать переход и переходную задержку.
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;
}
Ответ 4
В Firefox вы можете отключить все автозаполнение формы, используя атрибут autocomplete = "off/on". Аналогично, автозаполнение отдельных элементов может быть установлено с использованием того же атрибута.
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
Вы можете проверить это в Chrome, поскольку он должен работать.
Ответ 5
Если вы хотите сохранить автозаполнение, а также любые данные, прикрепленные обработчики и функции, прикрепленные к вашим входным элементам, попробуйте выполнить этот script:
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.)
Ответ 6
Следующий 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
Ответ 7
Работала для меня, требуется только изменение css.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}
вы можете поместить любой цвет вместо #ffffff.
Ответ 8
Это устраняет проблему как в 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);
}
Ответ 9
Немного взломанный, но отлично работает для меня
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Ответ 10
Здесь версия 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);
}
});
Ответ 11
Это помогло мне, только версия CSS.
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
где белый может быть любого цвета, который вы хотите.
Ответ 12
Я использую это,
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 */
Ответ 13
Сочетание ответов работало для меня
<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>
Ответ 14
В теге просто вставьте эту маленькую строку кода.
autocomplete="off"
Однако не помещайте это в поле username/email/idname, потому что если вы все еще хотите использовать автозаполнение, он отключит его для этого поля. Но я нашел способ обойти это, просто поместите код в свой тег ввода пароля, потому что вы никогда не будете автозаполнять пароли в любом случае. Это исправление должно удалить силу цвета, способность автозаполнения matinain в вашем поле "email/username" и позволит избежать громоздких хаков, таких как JQuery или javascript.
Ответ 15
Если вы хотите полностью избавиться от него, я скорректировал код в предыдущих ответах, чтобы он работал с зависанием, активным и фокусированным:
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
Ответ 16
Здесь решение Mootools, выполняющее то же самое, что и Alessandro, заменяет каждый затронутый ввод новым.
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);
});
}
Ответ 17
Как насчет этого решения:
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.
Ответ 18
Ни один из решений не работал у меня, входные данные пользователя и пароля все еще были заполнены и заданы на желтом фоне.
Итак, я спросил себя: "Как Chrome определяет, что должно быть автозаполнено на данной странице?"
"Он ищет идентификаторы ввода, имена ввода? Идентификаторы формы? Действие формы?"
Благодаря моим экспериментам с именами пользователей и вводами пароля было обнаружено только два способа: Chrome не сможет найти поля, которые необходимо авторизовать:
1) Поместите ввод пароля перед текстовым вводом. 2) Дайте им одинаковое имя и идентификатор... или нет имени и идентификатора.
После загрузки страницы с помощью javascript вы можете либо изменить порядок входов на странице, либо динамически дать им свое имя и идентификатор...
И Chrome не знает, что попало... autocomplete не работает.
Сумасшедший хак, я знаю. Но он работает для меня.
Chrome 34.0.1847.116, OSX 10.7.5
Ответ 19
Единственный способ, который работает для меня, - это: (требуется jQuery)
$(document).ready(function(e) {
if ($.browser.webkit) {
$('#input_id').val(' ').val('');
}
});
Ответ 20
Я исправил эту проблему для поля пароля, которое у меня есть:
Задайте тип ввода для текста вместо пароля
Удалите введенное текстовое значение с помощью jQuery
Преобразование типа ввода в пароль с помощью jQuery
<input type="text" class="remove-autofill">
$('.js-remove-autofill').val('');
$('.js-remove-autofill').attr('type', 'password');
Ответ 21
Обновление для решения 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);});
Ответ 22
Попробуйте этот код:
$(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">Ответ 23
исправленный ответ намрути правильный. Но фон по-прежнему становится желтым, когда выбран вход. Добавление !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;
}
Ответ 24
Добавление autocomplete="off" не режет его.
Измените атрибут типа ввода на type="search".
Google не применяет автоматическое заполнение к входам с типом поиска.
Надеюсь, это сэкономит вам некоторое время.
Ответ 25
Привет, используйте этот код.
<input type="email" id="email" name="email" class="form-control" onfocus="this.removeAttribute('readonly');" readonly data-error=".errorTxt1">
Ответ 26
Окончательное решение:
$(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);
}
});
Ответ 27
<input type="text" name="foo" autocomplete="off" />
Аналогичный вопрос: Ссылка
Ответ 28
Просто оказался с тем же вопросом. Это работает для меня:
form :focus {
outline: none;
}