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?

Did you try disabling autocomplete? https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion — Dominic, Oct 11 '21 at 20:57
Most browsers no longer allow the website to disable password autofill. Unfortunately, browsers get confused by multiple `type=password` inputs. I don't think there's anything you can do to fix this. — Barmar, Oct 11 '21 at 21:07
@Dominic Yes, i've tried all options for autocomplete, but I read that autocomplete doesn't apply to input password type. — MarceloDJunior, Oct 11 '21 at 21:48

score 1 · Answer 1 · answered Oct 12 '21 at 07:04

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>

How to disable password manager in my form?

1 Answers1