Переопределить заполнение форм браузера и подсветку ввода с помощью HTML / CSS
Встроенные помощники в MVC 4 создают абсолютные URL-адреса, если параметры host или protocol не являются пустыми. См. этот ответ здесь с примером метода расширения для использования в представлениях.
8 ответов
для автозаполнения можно использовать:
<form autocomplete="off">
относительно проблемы с раскраской:
из вашего скриншота видно, что webkit генерирует следующий стиль:
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) поскольку #id-стили даже более важны, чем . стили класса, следующее может сработать:
#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);
});
});
}
<form autocomplete="off">
Практически все современные браузеры будут это учитывать.
Вы также можете изменить атрибут name элементов вашей формы на что-то сгенерированное, чтобы браузер не отслеживал его. HOWEVER firefox 2.x+ и google chrome, кажется, не имеют особых проблем с этим, если url запроса идентичен. Попробуйте в основном добавить параметр запроса salt и имя поля salt для формы регистрации.
Однако я думаю, что autocomplete="off" все еще является лучшим решением :)
Снимок экрана, на который вы ссылаетесь, говорит, что WebKit использует селектор input:-webkit-autofill для этих элементов. Пробовали ли вы вставить это в свой CSS?
input:-webkit-autofill {
background-color: white !important;
}
Если это не сработает, то, вероятно, ничего не поможет. Эти поля выделены, чтобы предупредить пользователя о том, что они были автоматически заполнены частной информацией (например, домашним адресом пользователя), и можно утверждать, что если позволить странице скрыть это, то это создает угрозу безопасности.
Элемент формы имеет атрибут автозаполнения , который можно отключить . Что касается CSS, директива ! Important после свойства предотвращает его переопределение:
background-color: white !important;
Только IE6 не понимает этого.
Если я вас неправильно понял, есть еще свойство outline , которое вы можете найти полезным.
Вы можете отключить автозаполнение в HTML5 (через autocomplete = "off" ), но НЕ МОЖЕТЕ переопределить выделение в браузере. Вы можете попробовать использовать :: selection в CSS (для работы большинства браузеров требуется префикс поставщика), но это, вероятно, вам тоже не поможет.
Если поставщик браузера специально не реализовал специфичный для поставщика способ его переопределения, вы ничего не сможете сделать с такими стилями, которые уже предназначены для переопределения таблицы стилей сайта для пользователя. Обычно они применяются после применения ваших таблиц стилей и игнорируют ! important тоже отменяет.
Почему бы просто не поместить это в свой css:
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
Это должно решить вашу проблему. Хотя это вызывает проблемы с удобством использования, потому что теперь пользователь не видит, что форма была заполнена автоматически, как он / она привык.
[edit] После публикации этого сообщения я увидел, что аналогичный ответ уже был дан и , что вы прокомментировали его, что он не работает. Я не совсем понимаю, почему, потому что он действительно работал, когда я его тестировал.
Я видел, что функция автозаполнения панели инструментов 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>