防止浏览器自动填充账号和密码及浏览器兼容情况

最新推荐文章于 2025-06-27 08:45:00 发布

原创最新推荐文章于 2025-06-27 08:45:00 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

vue 专栏收录该内容

41 篇文章

订阅专栏

这篇博客介绍了如何解决浏览器自动填充账号和密码的问题，提供了五种不同的HTML输入字段设置方案，包括设置`readonly`属性、`autocomplete`属性为`new-password`、插入隐藏的密码输入框、利用`onfocus`事件切换类型以及使用隐藏的文本和密码输入框来防止自动填充。这些方案旨在确保用户在登录或其他需要输入密码的场景下，能够自主选择是否使用已保存的凭证。

自动填充跟手动填充

进入页面后，账号密码可能会自动填充
手动填充是要密码输入框获取焦点时，就会出现保存的账号的下拉框，可以选择其中一个，这是浏览器的功能

解决自动填充问题

方案一：

<input type="password" name="password" readonly onfocus="this.removeAttribute('readonly')" value="" autocomplete="off" />

在这里插入图片描述

方案二：

<input type="password"  name="password" autocomplete="new-password" />

在这里插入图片描述

方案三：

//在页面的 第一个password元素 （有些页面会有多个password，如注册页面）之前加入一行代码：
<input type="password" style="display: none;" />
<input type="password" name="password"  />

在这里插入图片描述

方案四：

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

在这里插入图片描述

方案五：

用于对付浏览器的自动填充表单。
但是可以自动获取密码（密码输入框过去焦点时浏览器提示是否使用某账号的密码）

<!-- 防止浏览器自动填充账号和密码 -->
<input type="text" style="height: 0;padding: 0;border:none;" />
<input type="password" style="height: 0;padding: 0;border:none;" />