How to prevent safari from popping up a password saving box?

Question

I'm confused by safari saving password box for few days: that is how to disable it popping up when submitting the form because I don't want to save the username and password.

Obviously, the "password" will trigger the saving mechanism。

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

---

But I change the "password" type to "text" type and use a property of css: -webkit-text-security which works for chrome rather than safari.

The -webkit-text-security can also inform the safari the element is a password input.

The following code using Vue framework and element-ui. The 'el-input' component has "off" value for "autocomplete" property default.

I post the data by axios rather than submit the form.

...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>

---

So, is there any other simple and effective ways to address it?

Hope your reply!

Thanks very much!

Best, Cassie

Answer 1

The short answer is that you cannot. This is because this depends on the browser and the user's configuration.

The long answer is that to prevent it from happening you can try some things: there is an option called autocomplete; this is used by some browsers to let the developer tell the browser that the user must not have any "help" during a form completion. If you set it to false some browsers will not save a password related to the form. However in some browsers, the user can still click on the key icon and select save password manually.

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

The way I would use is yo emulate what the browser does, I mean to not submit the form but instead make an AJAX request with the login and then redirect the user to the page required once the login is succesful.

For example, lets suppose that you had <form method="POST" action="myPage"> then you would eliminate the form, you would replace the <input type="submit" value="accept" /> with a <button id="whatever">accept</button> and then, in you JS file would put something like:

$("#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
            }
        }
    });
});

and in your page you have to change so, when the login success, instead of redirecting the user to "myPageAfterLogin", you must return a JSON with a success mark, like

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

I stay attend to any question.