У меня есть 2 основные формы - войти и зарегистрироваться, обе на одной странице. Теперь у меня нет проблем с автозаполнением формы входа, , но форма регистрации тоже заполняется автоматически, и мне это не нравится.
Кроме того, стили формы имеют желтый фон, который мне не удается переопределить, и я не хочу использовать для этого встроенный CSS. Что я могу сделать, чтобы они перестали окрашиваться в желтый цвет и (возможно) автозаполнение? Заранее спасибо!
для автозаполнения вы можете использовать:
<form autocomplete="off">
относительно проблемы окраски:
из вашего скриншота видно, что webkit генерирует следующий стиль:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) поскольку # id-styles даже более важны, чем стили .class, следующее может работать:
#inputId:-webkit-autofill {
background-color: white !important;
}
2) если это не сработает, вы можете попробовать установить стиль через javascript программно
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) если это не сработает, вы обречены :-) учтите: это не скроет желтый цвет, но сделает текст снова читаемым.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) решение css / javascript:
css:
input:focus {
background-position: 0 0;
}
и следующий javascript должен быть запущен при загрузке:
function loadPage()
{
if (document.login)//if the form login exists, focus:
{
document.login.name.focus();//the username input
document.login.pass.focus();//the password input
document.login.login.focus();//the login button (submitbutton)
}
}
eg:
<body onload="loadPage();">
удачи :-)
5) Если ничего из вышеперечисленного не помогло, попробуйте удалить элементы ввода, клонировать их, а затем снова разместить клонированные элементы на странице (работает в Safari 6.0.3):
<script>
function loadPage(){
var e = document.getElementById('id_email');
var ep = e.parentNode;
ep.removeChild(e);
var e2 = e.cloneNode();
ep.appendChild(e2);
var p = document.getElementById('id_password');
var pp = p.parentNode;
pp.removeChild(p);
var p2 = p.cloneNode();
pp.appendChild(p2);
}
document.body.onload = loadPage;
</script>
6) Из здесь:
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);
});
});
}
code
- person Mathijs Segers; 09.08.2013
.autofill-fix?
- person Zaffer; 28.06.2021
Обмани его с помощью "сильной" внутренней тени:
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: 0 0 0 50px white inset;/*your box-shadow*/
-webkit-text-fill-color: #333;
}
Добавьте это правило CSS, и желтый цвет фона исчезнет. :)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
После 2 часов поиска кажется, что Google Chrome все еще каким-то образом отменяет желтый цвет, но я нашел исправление. Он также будет работать для наведения, фокусировки и т. Д. Все, что вам нужно сделать, это добавить к нему !important.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
это полностью удалит желтый цвет из полей ввода
<form autocomplete="off">
Практически все современные браузеры это уважают.
autocomplete в том, что он недопустим в HTML до версии 5.
- person Paul D. Waite; 05.03.2010
Кажется, это работает для меня:
input {
-webkit-background-clip: text !important;
}Вы также можете изменить атрибут name ваших элементов формы, чтобы он создавался так, чтобы браузер не отслеживал его. ОДНАКО firefox 2.x + и google chrome, похоже, не имеют особых проблем с этим, если URL-адрес запроса идентичен. Попробуйте просто добавить параметр запроса соли и имя поля соли для формы регистрации.
Однако я думаю, что autocomplete = "off" по-прежнему остается лучшим решением :)
Вы можете отключить автозаполнение в HTML5 (через autocomplete="off"), но НЕ МОЖЕТЕ переопределить выделение в браузере. Вы можете попробовать использовать ::selection в CSS (для работы большинства браузеров требуется префикс поставщика), но это, вероятно, вам тоже не поможет.
Если поставщик браузера специально не реализовал зависящий от поставщика способ его переопределения, вы ничего не сможете сделать с такими стилями, которые уже предназначены для переопределения таблицы стилей сайта для пользователя. Обычно они применяются после применения ваших таблиц стилей и также игнорируют ! important переопределения.
Иногда автозаполнение в браузере по-прежнему выполняется автоматически, если у вас есть только код в элементе <form>.
Я также пробовал поместить его в элемент <input>, и он работал лучше.
<form autocomplete="off"> AND <input autocomplete="off">
Однако поддержка этого атрибута прекращается, прочтите https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1
https://bugzilla.mozilla.org/show_bug.cgi?id=956906
Еще одна работа, которую я обнаружил, - это удаление заполнителей внутри полей ввода, которые предполагают, что это адрес электронной почты, имя пользователя или поле телефона (например, «Ваша электронная почта», «Электронная почта» и т. Д.)
Это делает так, что браузеры не знают, что это за поле, и поэтому не пытаются выполнять его автозаполнение.
Если он находится в поле ввода, вы пытаетесь "убрать желтый" ...
Итак, это может выглядеть так:
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
Это устраняет проблему как в 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);
}
На скриншоте, на который вы ссылаетесь, говорится, что WebKit использует селектор input:-webkit-autofill для этих элементов. Вы пробовали поместить это в свой CSS?
input:-webkit-autofill {
background-color: white !important;
}
Если это не сработает, то, вероятно, ничего не выйдет. Эти поля выделены, чтобы предупредить пользователя о том, что они были автоматически заполнены личной информацией (например, домашним адресом пользователя), и можно утверждать, что разрешение скрывать страницу создает угрозу безопасности.
Элемент form имеет атрибут autocomplete, который можно установить на off. Что касается CSS, директива !important после свойства предотвращает его переопределение:
background-color: white !important;
Только IE6 этого не понимает.
Если я вас неправильно понял, есть еще свойство outline, которое может вам пригодиться.
!important, и в этом случае он имеет приоритет над всем остальным. Вам следует проверить таблицу стилей пользовательского агента (хотя я не знаю, где ее найти).
- person zneak; 26.01.2011
Я видел, как функция автозаполнения панели инструментов Google отключена с помощью javascript. Это может работать с некоторыми другими инструментами автозаполнения; Не знаю, поможет ли это с браузерами, в которых встроено автозаполнение.
<script type="text/javascript"><!--
if(window.attachEvent)
window.attachEvent("onload",setListeners);
function setListeners(){
inputList = document.getElementsByTagName("INPUT");
for(i=0;i<inputList.length;i++){
inputList[i].attachEvent("onpropertychange",restoreStyles);
inputList[i].style.backgroundColor = "";
}
selectList = document.getElementsByTagName("SELECT");
for(i=0;i<selectList.length;i++){
selectList[i].attachEvent("onpropertychange",restoreStyles);
selectList[i].style.backgroundColor = "";
}
}
function restoreStyles(){
if(event.srcElement.style.backgroundColor != "")
event.srcElement.style.backgroundColor = "";
}//-->
</script>
Попробовав много вещей, я нашел рабочие решения, которые уничтожили автозаполненные поля и заменили их дублированными. Чтобы не терять прикрепленные события, я придумал другое (немного длинное) решение.
При каждом событии «ввода» он быстро присоединяет события «изменения» ко всем задействованным вводам. Он проверяет, были ли они автозаполнены. Если да, то отправьте новое текстовое событие, которое заставит браузер думать, что значение было изменено пользователем, что позволит удалить желтый фон.
var initialFocusedElement = null
, $inputs = $('input[type="text"]');
var removeAutofillStyle = function() {
if($(this).is(':-webkit-autofill')) {
var val = this.value;
// Remove change event, we won't need it until next "input" event.
$(this).off('change');
// Dispatch a text event on the input field to trick the browser
this.focus();
event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, '*');
this.dispatchEvent(event);
// Now the value has an asterisk appended, so restore it to the original
this.value = val;
// Always turn focus back to the element that received
// input that caused autofill
initialFocusedElement.focus();
}
};
var onChange = function() {
// Testing if element has been autofilled doesn't
// work directly on change event.
var self = this;
setTimeout(function() {
removeAutofillStyle.call(self);
}, 1);
};
$inputs.on('input', function() {
if(this === document.activeElement) {
initialFocusedElement = this;
// Autofilling will cause "change" event to be
// fired, so look for it
$inputs.on('change', onChange);
}
});
Простое решение javascript для всех браузеров:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Клонировать ввод, сбросить атрибут и скрыть исходный ввод. Для iPad необходим тайм-аут
Поскольку браузер ищет поля типа пароля, другой обходной путь - включить скрытое поле в начало вашей формы:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Я прочитал так много тем и перепробовал так много фрагментов кода. Собрав все это, я нашел единственный способ чисто очистить поля логина и пароля и сбросить их фон на белый цвет:
$(window).load(function() {
setTimeout(function() {
$('input:-webkit-autofill')
.val('')
.css('-webkit-box-shadow', '0 0 0px 1000px white inset')
.attr('readonly', true)
.removeAttr('readonly')
;
}, 50);
});
Не стесняйтесь комментировать, я открыт для всех улучшений, если вы их найдете.
Автозаполнение не поддерживается современными браузерами. Самый простой способ решить проблему с автозаполнением, который я нашел, - это небольшая дорожка с HTML и JS. Первое, что нужно сделать, это изменить тип ввода в HTML с «пароль» на «текст».
<input class="input input-xxl input-watery" type="text" name="password"/>
Автозаполнение запускается после загрузки окна. Это нормально. Но когда тип вашего поля не «пароль», браузер не знал, какие поля он должен заполнить. Таким образом, в полях формы не будет автозаполнения.
После этого привяжите фокус события к полю пароля, например. в Backbone:
'focusin input[name=password]': 'onInputPasswordFocusIn',
В onInputPasswordFocusIn просто измените тип поля на пароль, выполнив простую проверку:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
Вот и все!
UPD: эта штука не работает с отключенным JavaSciprt
UPD 2018. Тоже нашёл забавный трюк. Установите атрибут readonly для поля ввода и удалите его в событии focus. Во-первых, запретить браузеру автозаполнение полей, во-вторых, разрешить ввод данных.
autocomplete=off, поскольку он некоторое время работает в FF, Chrome и IE, как в предыдущей версии, или около того.
- person casraf; 18.01.2017
Пожалуйста, попробуйте с autocomplete = "none" в вашем теге ввода
This works for me
Мне также пришлось изменить цвет текста на более темный (см. Цвета темной темы StackOverflow).
В итоге получился гибрид @ Tamás Pap, @MCBL и @don:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
-webkit-text-stroke-color: #e7e8eb !important;
-webkit-text-fill-color: #e7e8eb !important;
}
Вы можете стилизовать автозаполненные поля ввода с помощью :-webkit-autofill
Даже в firefox с префиксом webkit!
Чтобы изменить цвет фона, есть трюк с тенью блока.
А для Firefox вам потребуется дополнительно filter:none.
:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
Давайте воспользуемся небольшим взломом css:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
-webkit-text-fill-color: #000;
background: #fff !important;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}
Почему бы просто не поместить это в свой css:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Это должно решить вашу проблему. Хотя это вызывает проблемы с удобством использования, потому что теперь пользователь не может видеть, что форма была автоматически заполнена так, как он / она привык.
[править] После публикации этого я увидел, что аналогичный ответ уже был дан и, что вы прокомментировали его, что это не сработало. Я не совсем понимаю, почему, потому что он действительно работал, когда я его тестировал.
input:-webkit-autofill, а input --webkit-autocomplete просто не существует
- person ruruskyi; 16.08.2012
НАСТОЯЩАЯ проблема здесь в том, что в Webkit (Safari, Chrome, ...) есть ошибка. Если на странице более одной [формы], каждая из которых имеет [input type = "text" name = "foo" ...] (то есть с одинаковым значением атрибута 'name'), тогда, когда пользователь возвращается для страницы автозаполнение будет выполнено в поле ввода ПЕРВОЙ [формы] на странице, а не в [форме], которая была отправлена. Во второй раз будет автоматически заполнена СЛЕДУЮЩАЯ [форма] и так далее. Будет затронута только [форма] с текстовым полем ввода с ОДИНАКОВЫМ именем.
Об этом следует сообщить разработчикам Webkit.
Opera автоматически заполняет правую [форму].
Firefox и IE не заполняются автоматически.
Итак, я повторяю: это ошибка в Webkit.
