Web 防止浏览器记住登录密码（vue）

需求： 在上一篇（登录页隐藏密码位数）的基础上防止浏览器记住密码

在网上查了很多也试了很多,比如:

       1. 添加-webkit-text-security:disc;

        2. input 添加属性autocomplete = "off"; 

        3. 动态修改input的type属性

<input type="text" name="password" onfocus="this.type='password'" />

通过测试,发现有很多兼容上的问题。最后我选择了另外一种解决方式。

解决思路：

   使用type='text'属性，将输入的值都用 · 来代替，这样就不会被浏览器记录。

   问题： 用 · 来代替时，它的大小和type = 'password' 时的大小不同

   解决：当浏览器是 webkit内核时，使用 -webkit-text-security:disc; 否则当有值时将值的大小修改为22px(根据实际情况修改大小)。

具体代码：

CSS: