Question

几天以来我对野生动物园保存密码框感到困惑：这是如何在提交表单时禁用它，因为我不想保存用户名和密码。

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

<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”组件的“ autocomplete”属性默认值为“ off”。

我通过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，则某些浏览器将不会保存与表单相关的密码。但是，在某些浏览器中，用户仍然可以单击键图标并手动选择保存密码。

<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));

我会继续处理任何问题。

如何防止野生动物园弹出密码保存框？

1 个答案: