Question

我在Chrome自动填充字段中遇到此问题，Chrome忽略了'autocmplete =“false | off | others”'。我还尝试了隐藏的假字段，this，this等等。它似乎没有工作。字段变黄并包含密码，为此我决定使用以下CSS规则：

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

使用javascript：

$(window).load(function() {
    console.log('Inside JQuery Window.Load...');
    if(document.querySelector("input:-webkit-autofill")!= null) {
        document.querySelector("input:-webkit-autofill").value = "";
    }
    console.log('Autofill value(Before Alert): ' + document.querySelector("input:-webkit-autofill"));
    alert('An alert...');
    if(document.querySelector("input:-webkit-autofill")!= null) {
        document.querySelector("input:-webkit-autofill").value = "";
    }
    console.log('Autofill value(After Alert): ' + document.querySelector("input:-webkit-autofill"));
});

手动覆盖该字段。

以下是上述脚本的日志输出：

Inside JQuery Window.Load...
XXX:1324 Autofill value(Before Alert): null
XXX:1329 Autofill value(After Alert): [object HTMLInputElement]

当它在调试模式下运行时：

Inside JQuery Window.Load...
XXX:1324 Autofill value(Before Alert): [object HTMLInputElement]
XXX:1329 Autofill value(After Alert): [object HTMLInputElement]

我尝试了以下排列：

$('input:-webkit-autofill').each(function(){...});
window.document.querySelector("input:-webkit-autofill");
<body onload="chromeCheckAutofill();" />
<script>
    function checkAutofill() {
        if(document.querySelector("input:-webkit-autofill")!= null) {
             document.querySelector("input:-webkit-autofill").value = "";
        }
    }
</script>

这是有问题的字段：

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off">

我做错了什么？我该如何解决这个问题......

Answer 1

要避免Google Chrome自动填充，请尝试：

<input type="password" placeholder="Type your password" onfocus="this.removeAttribute('readonly');" readonly />

如果填充是只读的，则Chrome不会应用自动填充。

无论如何，您可以使用以下css将自动填充颜色（黄色变为白色）更改为名称属性值为“pass”的输入字段：

input[name="pass"]:-webkit-autofill {
-webkit-text-fill-color: #838B95 !important;
webkit-box-shadow: 0 0 0px 1000px white inset !important; //background
}

提示它始终是一个很好的最佳实践，尽可能多地使用css选择器，以避免其他不需要的css规则导致css重载。（即引导）。

Answer 2

我认为您没有在代码

中提供类型为type =“textbox”的文本框类型

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off">

Javascript仅适用于alert（）和Debug模式

2 个答案: