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

一、问题说明

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

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

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

二、解决思路

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

三、代码

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

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

四、结论

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

相关推荐
qq_510351595 小时前
vw 和 clamp()
前端·css·html
写不出来就跑路9 小时前
基于 HTML+CSS+JavaScript 的薪资实时计算器(含本地存储和炫酷动画)
javascript·css·html
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
蔗理苦1 天前
2025-09-04 HTML1——环境配置与简介
css·vscode·html
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
空山新雨(大队长)1 天前
HTML第六课:表格展示
html
蔗理苦1 天前
2025-09-04 HTML3——区块布局与表单
前端·css·html