javascript - 如何防止safari弹出密​​码保存框？

Question

几天来我对 safari 保存密码框感到困惑:这就是如何在提交表单时禁用它弹出，因为我不想保存用户名和密码。

很明显，“密码”会触发保存机制。

<input type="test" name="username">
<input type="password" name="password">

---

但我将“密码”类型更改为“文本”类型并使用 css: -webkit-text-security 的属性，它适用于 chrome 而不是 safari。

-webkit-text-security 还可以通知 safari 该元素是密码输入。

以下代码使用了Vue框架和element-ui。 “el-input”组件具有“自动完成”属性默认值的“关闭”值。

我通过 axios 发布数据而不是提交表单。

...methods: {
    submit() {
        const data = {
            accountName: this.form.accountName,
            password: this.form.password
        }
        
        axios.post(url, data)
    }
}

.password {
  -webkit-text-security: disc;
}

<el-form ref="form" label-position="right" :model="form">
    <el-form-item label="账号名" prop="accountName">
        <el-input v-model="form.accountName" :disabled="isEdit"></el-input>
    </el-form-item>
    <el-form-item label="登陆密码" prop="password" required>
        <el-input class="password" type="text" ref="pwd1" v-model="form.password"></el-input>
    </el-form-item>
</el-form>

<el-button class="submit-btn" type="primary" size="medium" @click="submit">create</el-button>

---

那么，有没有其他简单有效的方法可以解决呢？

希望得到您的回复!

非常感谢!

最好的，卡西

Answer 1

简短的回答是你不能。这是因为这取决于浏览器和用户的配置。

长的答案是，为了防止它发生，您可以尝试一些事情:有一个名为 autocomplete 的选项;这被一些浏览器用来让开发人员告诉浏览器用户在表单完成期间不能有任何“帮助”。如果将其设置为 false，某些浏览器将不会保存与表单相关的密码。然而在某些浏览器中，用户仍然可以点击 key 图标并选择手动保存密码。

<form action="myPage" method="post" autocomplete="off">

我将使用的方式是模拟浏览器的功能，我的意思是不提交表单而是使用登录发出 AJAX 请求，然后在登录成功后将用户重定向到所需的页面。

例如，假设您有 <form method="POST" action="myPage">然后你会删除表格，你会替换 <input type="submit" value="accept" />用<button id="whatever">accept</button>然后，在你的 JS 文件中会放一些类似的东西:

$("#whatever").click(function (evento) {
    jQuery.ajax({
        url: "myPage",
        dataType: "json",
        method: "POST",
        data: {
            user: $("#userField").val(),
            pw: $("#pwField").val()
        },
        success: function (result) {
            if (result.success) {
                window.location.href = "myPageAfterLogin";
            } else {
                // what should happen if the loggin failed
            }
        }
    });
});

并且在您的页面中，您必须进行更改，因此，当登录成功时，您必须返回带有成功标记的 JSON，而不是将用户重定向到“myPageAfterLogin”，例如

$result['success'] = true;
exit(json_encode($result));

我会随时注意任何问题。