禁止浏览器自动填充密码的方法

一、问题说明

浏览器加载到html中form表单时，会尝试使用保存的当前网页信息，对网页中的特定输入框进行自动填充，比如<input type = "password">输入框就会被自动填充保存的密码信息。

一些前端库提供的密码样式，如我这里使用的MiniUI，最终在浏览器中渲染为<input type = "password">。

当前有个需求是对输入框内容进行加密，加密原理是通过监听输入框输入实现，浏览器自动填充内容无法被成功加密，需要禁用浏览器自动填充。

二、解决思路

试了网上说的autocomplete="off"或者autocomplete="new-password"等配置，都没效果，最后使用的方案是input标签设置为readonly只读，使浏览器无法自动填充，页面加载完成后，再将input标签的readonly属性删除。

三、代码

前端使用的是MiniUI，代码供参考

<input class="mini-password" id="password" name="password" readonly>
...
<scripy>
	mini.get("password").setReadOnly(false);	
<script/>

四、结论

虽然能解决自动填充，但是点击输入框，还是会弹出自动填充下拉框，有更好的解决办法欢迎大家评论区指出。