如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

我通过添加两个假输入并赋予它们绝对位置来阻止Chrome 66自动填充:

<form style="position: relative">
  <div style="position: absolute; top: -999px; left: -999px;">
    <input name="username" type="text" />
    <input name="password" type="password" />
  </div>
  <input name="username" type="text" />
  <input name="password" type="password" />

起初,我尝试添加display:none;但Chrome忽略了这些输入,并自动填充可见的输入。

其他回答

将输入保留为文本类型并隐藏。在DOMContentLoaded上,调用一个函数来更改密码类型并显示字段,延迟1秒。

document.addEventListener('DOMContentLoaded',changeInputsType);函数更改InputsType(){setTimeout(函数){$(/*selector*/).prop(“type”,“password”).show();}, 1000);}

添加

autocomplete=“关闭”

表单标记将禁用浏览器对该特定表单中所有输入字段的自动完成(之前在该字段中键入的内容)。

测试日期:

Firefox 3.5,4测试版Internet Explorer 8铬

除了

autocomplete="off"

使用

readonly onfocus="this.removeAttribute('readonly');"

对于不希望他们记住表单数据(用户名、密码等)的输入,如下所示:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

许多现代浏览器不再支持登录字段的autocomplete=“off”。autocomplete=“新密码”是wokring,更多信息MDN文档

我的问题主要是Chrome自动填充,但我认为这可能比自动完成问题更大。

技巧:使用计时器重置表单并将密码字段设置为空白。100毫秒的持续时间似乎是它工作的最短时间。

$(document).ready(function() {
    setTimeout(function() {
        var $form = $('#formId');
        $form[0].reset();
        $form.find('INPUT[type=password]').val('');
    }, 100);
});