浏览器保存密码有时会导致一些奇葩问题，只要你的表单里面有了 input="password"，就会使本该填写其他内容的地方浏览器自作主张的给你填上了帐号、密码。

解决这个问题的关键是屏蔽 input="password"的影响，网上也有许多解决方案，但目前没有遇到一个能完美兼容的。

<!-- 设置autocomplete -->
<input type="password" autocomplete="off" />

<!-- 动态readonly -->
<input type="password" readonly onfocus="this.removeAttribute('readonly');" />

<!-- 动态type -->
<input input="text" onfocus="this.type='password'" />

今天在知乎上看到了这个办法，思路真的比较清奇

@font-face {
  font-family: 'password';
  src: url(./password.ttf);
}
input {
  font-family: 'password';
}

这个方法的主要思路是不使用 input="password"，改为使用 input="text"，并单独设置其字体为 password，这样不论你输入什么内容，都会显示一个圆点，效果等同于 password 输入框

password.ttf 的下载地址

https://github.com/davidagraf/passwd/blob/master/public/ttf/password.ttf

链接失效也可以自行 Google，挺容易找到的。