У меня есть две основные формы: вход и регистрация, как на одной странице. Теперь у меня нет проблем со знаком в автозаполнении формы, , но также заполняет форму автозаполнения, и мне это не нравится.
Кроме того, стили формы получают желтый фон, который я не могу переопределить, и я не хочу использовать встроенный CSS для этого. Что я могу сделать, чтобы они перестали быть цветными желтыми и (возможно) автозаполнением? Спасибо заранее!
для автозаполнения, вы можете использовать:
<form autocomplete="off">
относительно проблемы окраски:
с вашего скриншота я вижу, что webkit генерирует следующий стиль:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1), поскольку # id-стили еще важнее стилей .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)
}
}
например:
<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);
});
});
}
Обманите его "сильной" внутренней тенью:
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;
}
<form autocomplete="off">
Практически все современные браузеры будут уважать это.
После двух часов поиска кажется, что 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;
}
это полностью удалит желтый цвет из полей ввода
Вы также можете изменить атрибут имени ваших элементов формы, чтобы он был сгенерирован, чтобы браузер не отслеживал его. ОДНАКО 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
Другая работа, которую я нашел, - это вынимать заполнители внутри полей ввода, которые предполагают, что это адрес электронной почты, имя пользователя или телефон (т.е. "Ваша электронная почта", "Электронная почта" и т.д. ")
Это делает так, что браузеры не знают, что это за поле, поэтому он не пытается автозаполнять его.
Это устраняет проблему как в 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);
}
Если в поле ввода вы пытаетесь "не желтеть"...
Итак, это может выглядеть так:
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
Снимок экрана, на который вы ссылаетесь, говорит, что WebKit использует селектор input:-webkit-autofill для этих элементов. Вы пытались поместить это в свой CSS?
input:-webkit-autofill {
background-color: white !important;
}
Если это не сработает, то ничего не произойдет. Эти поля выделены, чтобы предупредить пользователя о том, что они были заполнены с помощью личной информации (например, домашний адрес пользователя), и можно утверждать, что позволяет скрыть страницу, что позволяет риск для безопасности.
Элемент form имеет атрибут autocomplete, который можно установить в off. Начиная с CSS директива !important после свойства не позволяет ей переопределить:
background-color: white !important;
Только IE6 этого не понимает.
Если вы меня неправильно поняли, также есть свойство outline, которое вы можете найти полезным.
Я видел, что функция автозаполнения панели инструментов 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);
}
});
Простое решение для всех браузеров:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
Ввод клонирования, атрибут reset и скрыть исходный ввод. Тайм-аут необходим для iPad
Поскольку браузер ищет поля типа пароля, другим способом является включение скрытого поля в начале формы:
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
Я прочитал так много потоков и попробовал так много кусков кода. После сбора всего этого, единственный способ, по которому я нашел чистое поля для входа и пароля и reset, их фон в белый цвет был следующим:
$(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"/>
Автозаполнение начинается после загрузки окна. Это нормально. Но когда тип вашего поля не является "паролем", браузер не знал, какие поля он должен заполнить. Таким образом, в поля формы не будет автозаполнения.
После этого привяжите event focusin к полю пароля, например. в макете:
'focusin input[name=password]': 'onInputPasswordFocusIn',
В onInputPasswordFocusIn просто измените тип своего поля на пароль, просто проверьте:
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
Вот так!
UPD: эта вещь не работает с отключенным JavaSciprt
UPD в 2018. Также нашел забавный трюк. Установите атрибут readonly в поле ввода и удалите его в событии фокуса. Сначала запретите браузер от полей автозаполнения, второй позволит вводить данные.
Я нашел эту страницу, это самый полный ответ, я думаю
Почему бы просто не поместить это в ваш css:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Это должно позаботиться о вашей проблеме. Хотя это поднимает проблему юзабилити, потому что теперь пользователь не может видеть, что форма была автозаполнена в том, как он/она используется.
[edit] После публикации этого сообщения я увидел, что аналогичный ответ уже дан, и вы прокомментировали его, что он не работает. Я не совсем понимаю, почему, потому что он работал, когда я тестировал его.
Проблема REAL заключается в том, что Webkit (Safari, Chrome,...) имеет ошибку. Если на странице имеется более одной [формы], каждая из которых имеет [input type = "text" name= "foo"...] (то есть с тем же значением для атрибута 'name'), тогда, когда пользователь возвращается на страницу, то автозаполнение будет выполняться в поле ввода FIRST [form] на странице, а не в [форме], которая была отправлена. Второй раз, NEXT [form] будет автозаполнен и т.д. Будет затронута только [форма] с текстовым полем ввода с ИМЯМ именем.
Об этом сообщается разработчикам Webkit.
Opera автоматически обрабатывает правую [форму].
Firefox и IE не автозаполняются.
Итак, я снова говорю: это ошибка в Webkit.