Here is a long-live problem with input type = password: the entering of hidden text without the password manager getting involved. There are many reasons why you want this: for example you have some password field (SSN) on a form and then after submit you see a popup with a suggestion to save this as a password of your webapp. Or browser get the autofill wrong for password inputs that aren’t used for logins.
First and cheap solution would be a special CSS property: -webkit-text-security. But it isn’t supported by browsers well. Even the MDN page is filled partially.
Next thought: change input type from text to password after focus event. But it won’t prevent the browser’s password suggestion system from popping up.
Also you can create your own input field, maybe based on webcomponents standard. It’s definitely a working solution, but a bit expensive.
And finally we have next cheap and working solution. Just use input type = text with special font, filled by bullets symbols.
@font-face {
font-family: 'dotsfont';
src: url('dotsfont.woff2') format('woff2');
}
.password {
font-family: 'dotsfont';
}<p>Password: <input type="text" class="dotsfont"></p>
The dotsfont you can download from this repository by Kylewelsby.
Someone might say that text can be copied from such a field. But the main purpose of bullets instead of symbols are masking input from someone standing behind the user or a security camera. Also if an intruder got access to the user’s machine somehow copying password would be the least problem.