Html Google Chrome表单自动填充及其黄色背景

我有谷歌浏览器及其表单自动填充功能的设计问题。 如果Chrome记得某个登录/密码，它会将背景颜色更改为黄色

以下是一些屏幕截图：

---

如何删除背景或仅禁用此自动填充？

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

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

您可以在Chrome中测试它，因为它应该可以工作。

解决方案：

---

这里有一个与Alessandro相同的Mootools解决方案——用一个新的输入替换每个受影响的输入

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

---

如果要保留自动填充以及任何数据、附加的处理程序和附加到输入元素的功能，请尝试以下脚本：

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和IE 8中工作。）

在您的标签中，只需插入这一小行代码

autocomplete="off"

---

但是，不要将其放在username/email/idname字段中，因为如果您仍希望使用autocomplete，它将为此字段禁用它。但我找到了一种解决方法，只需将代码放在您的密码输入标记中，因为您永远不会自动完成密码。此修复程序将删除电子邮件/用户名字段上的颜色强制、matinain自动完成功能，并允许您避免像Jquery或javascript这样的大量黑客攻击。

我刚刚发现自己有同样的问题。这对我很有用：

form :focus {
  outline: none;
}

---

这是Jason的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);                                               


    }
});

将“白色”更改为您想要的任何颜色

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

---

这解决了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);
}

---

那么这个解决方案呢：

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

$(document).ready(function(){
    var contadorInterval = 0;
    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();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

它关闭自动完成和自动填充（使黄色背景消失），等待100毫秒，然后在没有自动填充的情况下返回自动完成功能

---

如果您有需要自动填充的输入，请在css类中为它们提供

auto complete。
以下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;
}

解决方案复制自：
最终解决方案：

if ($.browser.webkit) {
    $(function() {
        var inputs = $('input:not(.auto-complete-on)');

        inputs.attr('autocomplete', 'off');

        setTimeout(function() {
            inputs.attr('autocomplete', 'on');
        }, 100);
    });
}

$(document).ready(function(){
    var contadorInterval = 0;
    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();
                    setTimeout(function(){
//                        $("#User").val('');
                        $("#Password").val('');
                    },10);
                });
            }
            contadorInterval++;
            if(contadorInterval > 50) window.clearInterval(_interval); // stop polling
        }, 20);
    }else{
        setTimeout(function(){
//            $("#User").val('');
            $("#Password").val('');
        },100);
    }
});

没有一个解决方案对我有效，用户名和密码输入仍然被填充，并给出黄色背景

所以我问自己，“Chrome如何决定在给定页面上应该自动填充哪些内容？”

它是否查找输入ID、输入名称？表单ID？表单操作

通过我对用户名和密码输入的实验，我发现只有两种方式会导致Chrome无法找到应该自动填充的字段：

1） 将密码输入置于文本输入之前。
2） 给他们相同的名字和身份证。。。或者没有名字和身份证

页面加载后，使用javascript，您可以更改页面上输入的顺序，或者动态地为它们指定名称和id

Chrome不知道是什么击中了它。。。自动完成保持关闭状态

疯狂的黑客，我知道。但它对我有用

Chrome 34.0.1847.116，OSX 10.7.5
<input type="text" name="foo" autocomplete="off" />

---

类似的问题：

唯一适合我的方法是：（jQuery必选）

---

我修复了密码字段的此问题，如下所示：

将输入类型设置为文本而不是密码

使用jQuery删除输入文本值

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

使用jQuery将输入类型转换为密码

<input type="text" class="remove-autofill">

$('.js-remove-autofill').val('');    
$('.js-remove-autofill').attr('type', 'password');

$（'.js删除自动填充'）.val（''）；
$（'.js remove autofill'）.attr（'type'，'password'）；

如果您想完全摆脱它，我已经在前面的答案中调整了代码，使其也适用于悬停、活动和聚焦：

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:active, input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
}

---

Arjans解决方案的更新。当尝试更改值时，它不允许您更改。这对我来说很好。当你关注一个输入时，它会变成黄色。够近了

$(document).ready(function (){
    if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
        var id = window.setInterval(function(){
            $('input:-webkit-autofill').each(function(){
                var clone = $(this).clone(true, true);
                $(this).after(clone).remove();
            });
        }, 20);

        $('input:-webkit-autofill').focus(function(){window.clearInterval(id);});
    }
});

$('input:-webkit-autofill').focus(function(){window.clearInterval(id);});

---

这对我很有帮助，一个只有CSS的版本

input:-webkit自动填充{
-webkit盒阴影：0 0px 1000px白色镶嵌；
}

白色可以是你想要的任何颜色。

我用这个

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

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 */

请尝试以下代码：

$（函数（）{
setTimeout（函数（）{
$（'[name=user_password]'）。attr（'type'，'password'）；
}, 1000);
});
有点老套，但对我来说非常适合

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

如果你们想要透明的输入字段，可以使用transition和transitiondelay

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
}

Fared namrouti的回答是正确的。但是当选择输入时，背景仍然变为黄色。添加
！重要信息
修复此问题。如果您还希望
textarea
和
select
具有相同的行为，只需添加
textarea:-webkit autofill，选择：-webkit autofill

仅输入

input:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

输入、选择、文本区域

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: rgb(250, 255, 189) !important;
}

添加
autocomplete=“off”
并不能解决问题

将输入类型属性更改为
type=“search”


谷歌不使用自动填充来搜索输入

希望这能为您节省一些时间。
对我有效，只需更改css即可

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset!important;
}

你可以用任何颜色来代替#ffffff
一组答案对我来说很有用

<style>
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0px 1000px #373e4a inset !important;
           -webkit-text-fill-color: white !important;
   }
</style>


输入：-webkit自动填充，
输入：-webkit自动填充：悬停，
输入：-webkit自动填充：焦点，
输入：-webkit自动填充：激活{
-webkit盒阴影：0 0px 1000px#373e4a插图！重要；
-webkit文本填充颜色：白色！重要；
}
如果您想避免黄色闪烁，直到您的css应用程序启动