Masking input characters without type=password

You can make a fake password input with type text using a custom font:

@font-face {
  font-family: 'password';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.key {
  font-family: 'password';
  width: 100px; height: 16px;  
}

<p>Password: <input class="key" type="text" autocomplete="off" /></p>

JSBin Demo

Notice that this only raises more security concerns.

Here's an idea, but I'm suggesting it for cases where browsers get the autofill wrong for passwords that aren't used for logins. There probably needs to be a better standard for identifying login screens so browsers don't have to use heuristics looking for fields with type="password".

Load the form with the password field with type="text", so browsers' autocompletion algorithms will ignore it. When the user inputs something in that field, switch its type="password".

I'm not much of a JavaScript programmer, but I hacked a JSFiddle to show how it theoretically works.

Perhaps onfocus would be a better way to go, too, but I didn't try it.