我有设计问题与谷歌Chrome浏览器和它的形式自动填充功能。 如果Chrome记住了一些登录/密码,它会将背景颜色更改为黄色。

以下是一些截图:

如何删除背景或只是禁用这个自动填充?


当前回答

唯一适合我的方法是:(jQuery要求)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});

其他回答

如果你想保留自动填充,以及任何数据,附加处理程序和附加到输入元素的功能,试试这个脚本:

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中使用。)

下面是一个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);
    });
}

下面的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重写浏览器表单填充和输入高亮显示

在Firefox中,您可以使用autocomplete="off/on"属性禁用表单上的所有自动完成功能。同样,单个项目的自动完成也可以使用相同的属性设置。

<form autocomplete="off" method=".." action="..">  
<input type="text" name="textboxname" autocomplete="off">

你可以在Chrome中测试它,因为它应该工作。

解决方案:

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);
        });
    });
}