我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。
以下是一些截图:
如何删除背景或只是禁用这个自动填充?
我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果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和ie8中使用。)
其他回答
试试下面的代码:
功能(美元){ setTimeout(功能(){ (‘name = user_password’美元)。“型”、“密码”attr (); 是,1000); }); <剧本剧本src = " https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js " > < / > <输入:“用户_password”type=“password”>
那解决方案呢:
if ($.browser.webkit) {
$(function() {
var inputs = $('input:not(.auto-complete-on)');
inputs.attr('autocomplete', 'off');
setTimeout(function() {
inputs.attr('autocomplete', 'on');
}, 100);
});
}
它会关闭自动完成和自动填充(因此黄色背景消失),等待100毫秒,然后在没有自动填充的情况下将自动完成功能恢复。
如果你有需要自动填充的输入,那么给它们一个自动完成的css类。
这修复了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:-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 */
这是杰森的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);
}
});