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

一、问题说明

浏览器加载到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/>

四、结论

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

相关推荐
折翼的恶魔9 小时前
HTML媒体标签
前端·html
通往曙光的路上16 小时前
时隔一天第二阶段他来了 html!!!!!!!!!!!
前端·html
带娃的IT创业者17 小时前
从零构建智能HTML转Markdown转换器:Python GUI开发实战
android·python·html
六月的可乐20 小时前
探索AI在线前端html编辑器IDE
前端·html·ai编程
এ᭄请你吃糖℘1 天前
html原生表格,实现左侧列固定
前端·html
熙凝2 天前
svg图标在react项目中的使用
html
Never_Satisfied2 天前
在JavaScript / HTML中,让<audio>元素中的多个<source>标签连续播放
开发语言·javascript·html
Paddy哥2 天前
html调起exe程序
前端·html
患得患失9492 天前
【ThreeJs】【HTML载入】Three.js 中的 CSS2DRenderer 与 CSS3DRenderer 全面解析
javascript·html·css3
折翼的恶魔2 天前
HTML基本标签二:
前端·html