定义输入的属性type=“text”和autocomplete=“off”足以为我关闭自动完成。

除了type=“password”之外，我尝试使用JavaScript钩住别人的建议中的onfocus/onfocuout事件来切换只读属性，效果很好，但当密码字段编辑开始为空时，自动完成密码再次出现。

我建议除了上述工作正常的解决方法之外，还可以使用JavaScript挂钩oninput事件来切换关于密码长度的类型属性。。

<input id="pwd1" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />
<input id="pwd2" type="text" autocomplete="off" oninput="sw(this)" readonly onfocus="a(this)" onfocusout="b(this)" />

和JavaScript。。

function sw(e) {
    e.setAttribute('type', (e.value.length > 0) ? 'password' : 'text');
}
function a(e) {
    e.removeAttribute('readonly');
}
function b(e) {
    e.setAttribute('readonly', 'readonly');
}

如果不使用客户端和服务器端代码的组合，似乎不可能实现这一点。

为了确保用户每次都必须填写表单而不必自动完成，我使用了以下技术：

在服务器上生成表单字段名称，并使用隐藏的输入字段来存储这些名称，以便在提交到服务器时，服务器端代码可以使用生成的名称来访问字段值。这是为了阻止用户选择自动填充字段。在表单上放置每个表单字段的三个实例，并使用css隐藏每个集合的第一个和最后一个字段，然后在使用javascript加载页面后禁用它们。这是为了防止浏览器自动填写字段。

这里有一个fiddle演示了javascript、css和html，如#2所述https://jsfiddle.net/xnbxbpv4/

javascript代码：

$(document).ready(function() {
    $(".disable-input").attr("disabled", "disabled");
});

css：

.disable-input {
  display: none;
}

html格式：

<form>
<input type="email" name="username" placeholder="username" class="disable-input">
<input type="email" name="username" placeholder="username">
<input type="email" name="username" placeholder="username" class="disable-input">
<br>
<input type="password" name="password" placeholder="password" class="disable-input">
<input type="password" name="password" placeholder="password">
<input type="password" name="password" placeholder="password" class="disable-input">
<br>
<input type="submit" value="submit">
</form>

下面是一个使用asp.net和razor的服务器代码的粗略示例

型号：

public class FormModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

控制器：

public class FormController : Controller
{
    public ActionResult Form()
    {
        var m = new FormModel();

        m.Username = "F" + Guid.NewGuid().ToString();
        m.Password = "F" + Guid.NewGuid().ToString();

        return View(m);
    }

    public ActionResult Form(FormModel m)
    {
        var u = Request.Form[m.Username];
        var p = Request.Form[m.Password];

        // todo: do something with the form values

        ...

        return View(m);
    }
}

视图：

@model FormModel

@using (Html.BeginForm("Form", "Form"))
{
    @Html.HiddenFor(m => m.UserName)
    @Html.HiddenFor(m => m.Password)

    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <input type="email" name="@Model.Username" placeholder="username">
    <input type="email" name="@Model.Username" placeholder="username" class="disable-input">
    <br>
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <input type="password" name="@Model.Password" placeholder="password">
    <input type="password" name="@Model.Password" placeholder="password" class="disable-input">
    <br>
    <input type="submit" value="submit">
}

如果您在JavaScript中动态设置autocomplete=“off”，Safari不会改变对自动完成的看法。然而，如果您在每个字段的基础上执行此操作，则会受到尊重。

$(':input', $formElement).attr('autocomplete', 'off');

最佳解决方案：

防止自动完成用户名（或电子邮件）和密码：

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

阻止自动完成字段：

<input type="text" name="field" autocomplete="nope">

说明：autocomplete在＜input＞中继续工作，autocomplete=“off”不工作，但您可以将off更改为随机字符串，如nope。

工作地点：

铬：49、50、51、52、53、54、55、56、57、58、59、60、61、62、63和64Firefox：44、45、46、47、48、49、50、51、52、53、54、55、56、57和58

为了解决这个问题，我使用了一些CSS技巧和以下工作。

input {
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

请阅读本文了解更多详情。

我在一个表单上遇到了问题，其中包含用户名和电子邮件的输入字段，而电子邮件正好在用户名之后。Chrome会自动将我当前的网站用户名填入电子邮件字段，并将重点放在该字段上。这并不理想，因为它是一种向web应用程序添加新用户的表单。

看起来，如果您有两个输入，一个接一个，其中第一个输入的标签或ID中包含“用户名”或用户名，而下一个输入的商标或ID中则包含“电子邮件”一词，chrome将自动填充电子邮件字段。

对我来说，解决问题的是将输入的ID更改为不包含这些单词。我还必须设置标签的文本转换为空字符串，并使用javascript settimeout函数将标签更改回0.01秒后的状态。

setTimeout(function () { document.getElementById('id_of_email_input_label').innerHTML = 'Email:'; }, 10);

如果您遇到任何其他输入字段被错误自动填充的问题，我会尝试此方法。