How to disable password manager in my form?

Question

How can I disable the default password manager in my form?

I have a website with a form where users need to input their pin code (only numbers, chars hidden) in some operations. The pin input is of type password. My website has also a login page. When users login and save their password, the saved password keeps popping up in the pin input that has nothing to do with the login credentials. After filling the pin, the browser also shows the option to update the saved password.

How can I disable this default behavior? I only want the password manager to work in the login form, not the pin form. I have tested in Chrome and Opera.

If not, is there a workaround?

Answer 1

Given that browsers want to 'remember' the password and will present it again if there's another input of type password to the same place then I think you'll have to abandon the idea of the pin input being a password type.

Instead you can get a certain way in just HTML by limiting the acceptable input to 4 digits and setting the security so the digits don't get echoed. You can also alert the user to invalid input by changing the look of the input element.

.pincode {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  text-security: disc;
}

.pincode:invalid {
  border: red solid 3px;
}

<input name="pincode" type="text" class="pincode" maxlength="4" inputmode="numeric" pattern="[0-9]{4}">
<button onclick="alert(document.querySelector('input').value);">OK</button>