Javascript 仅适用于 alert() 和调试模式答案

【问题标题】：Javascript works only with alert() and Debug modeJavascript 仅适用于 alert() 和调试模式
【发布时间】：2016-08-31 00:56:25
【问题描述】：

我遇到了 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">

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

【问题讨论】：

可以添加一些 HTML 代码 sn-p 吗？
没有<form autocomplete="off" ...></form> 工作？
您正在尝试使用 HTML 和 JS 来操纵 Chrome 的工作方式？您是否也打算为 IE/Edge/Safari/Opera 实施单独的解决方案来覆盖它们的自动填充功能？
我不必... Firefox 和 IE 在 autocomplete='off' 方面没有问题

标签： javascript jquery google-chrome onload autofill

【解决方案1】：

为了避免谷歌浏览器自动填充尝试：

<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 规则重载。（即引导程序）。

【讨论】：

这里的 HTML 是通过 XSLT 模板生成的。我在那里所做的任何更改都会反映在整个应用程序中。我想尽可能避免这种情况。从 XSLT 中将字段设为只读会导致麻烦...
我已经添加了 CSS 规则...我们不使用引导程序，我猜对我来说很幸运。
好的，但是您可以为您的输入字段指定一个非常具体的 css 选择器。

【解决方案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">

【讨论】：