input password输入框默认填充密码的解决方案

最新推荐文章于 2025-07-03 11:10:54 发布
最新推荐文章于 2025-07-03 11:10:54 发布
阅读量7.9k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： HTML+CSS 文章标签： autocomplete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/list_yang/article/details/81508365
本文分享了在制作登录注册版块时遇到的浏览器自动填充密码问题及解决方案。通过设置autocomplete属性为new-password，有效避免了浏览器记忆密码的干扰，提高了用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天作为项目启动的前期，前段人员把HTML静态页面反馈给我，在我尝试制作登录注册版块的时候发现了一个小问题，因为我电脑浏览器上有多个站点都是记住密码，当我把光标落在password字段上时会提示我（如下图）：

哎！因为我自带的小强迫症无法接受这种情况，那就找度娘解决吧，20分钟后我在五花八门的回答中我找到了一个较为完美的解决方案，经过测试，可以解决大部分浏览器兼容，以下为实际代码：

<input type="password" placeholder="密码" autocomplete="new-password" />

解决后的网页截图：

取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题
weixin_41346436的博客
10-24 755
【代码】取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题。
input password 类型密码自动填充 问题解决
cainiaochen3的博客
03-08 5905
在登录不同平台经常习惯性记住密码 导致在开发过程中发现 自己开发的网站如果存在input 密码框 浏览器会自动填充密码到里面 解决方法参考163邮箱网站 直接简单 加入autocomplete="new-password" &lt;el-input placeholder="请输入密码" v-model="userDialogFormList.lockAuthorizedPwd" type="...
定义input_password函数，提示用户输入密码.如果用户输入长度＜8，抛出异常，如果用户输入长度＞=8，返回输入的密码
m0_45127365的博客
06-13 539
return print(f"你的密码为:{password},请确认")raise ValueError("密码长度不能小于8")number1=input("请输入你的密码:")
vue3 input 输入密码后显示... 不使用 type=“password“
最新发布
weixin_43746297的博客
07-03 203
属性将输入内容显示为圆点（类似密码框效果），但实际类型仍为。‌：完全控制显示逻辑，可自定义替换符号（如。通过监听输入事件，实时将输入内容替换为。‌：部分旧版本浏览器可能不支持。‌：无需额外逻辑，纯样式实现。，避免浏览器自动填充密码‌。‌：需手动处理输入事件‌。
Input Password关键字——主要用来输入密码（和Input Text关键字输入文本相区别）...
小白龙白龙马的博客
01-30 996
Input Password关键字：主要用来输入密码； =================================================== Input Password id=kw 123456 ...
Input Password 防止自动填充
编码行者的博客
11-09 840
在项目中常需要修改或者填写密码，假设浏览器已经记住密码，常会通过 autocomplete=off 设置防止自动填充 type=password 的字段。但是大多数情况这样设置是无效的。@pdai。
html添加密码输入框,HTML input password密码输入框简介说明
热门推荐
weixin_33380613的博客
06-09 1万+
摘要:下文讲述html代码中input type=’password’时的相关属性简介说明,如下所示:input type=’password’ 简介当 input标签中 type=’password’时,代表此标签是一个单行文本密码输入框，单行文本密码框有一个显著的特点：就是输入的字符串都是一个“密文”的形式显示,单行文本密码框所包含的其它属性同password一样,如下所示：1.name:此属...
Debug-033-input输入框的浏览器默认填充密码的行为（未解决）
LM0916的博客
11-25 704
一般来讲不会超过三个，我看阿里云的设置密码就想到这个问题了，我没有别人的号，所以不会被记录到，而我们这里使用的是测试账号，记录过很多同事的账号，所以积累的比较多，其实只要用户一旦输入一个值之后，浏览器的填充就会消失了，没太大影响。想讨论的是如图二所示的问题：浏览器默认填充密码的行为。上面两个截图是MDN给出的解释，比较客观的表达了，确实不一定生效，有浏览器版本因素和不同浏览器的兼容因素。这里首先就给大家排出掉网上的一些很奇怪的“偏门方法”，我仔细想了一下，得不偿失，而且很多都是错的，完全没用。
模仿password输入框的实现代码
09-02
在实际的生产环境中，应使用原生的`<input type="password">`标签，以确保浏览器提供内置的安全机制，如密码自动填充、防止页面源代码查看等。此外，密码应当在后端进行加密存储和验证，确保用户数据的安全。
Chrome禁止输入框弹出已经记录的密码方案，测试有效.txt
09-17
然而，传统的方法，如通过设置`autocomplete`属性为`off`来禁用自动填充密码的功能，在某些版本的Chrome浏览器上已经不再生效。本文将介绍一种经过测试验证仍然有效的方案，该方案适用于Chrome 84版本，可以有效地...
input 输入框禁止自动填充密码，适用于各种浏览器
qq_43065954的博客
11-13 2936
var passwordValue = ''; //定义一个空变量用来存储密码 $(function(){ $('#password').on('input', function(){ var value=$(this).val(); if(value.length > passwordValue.length){ passwordValue += value.substr(pa...
input password 明文显示
孙小小子的博客
12-24 6411
首先声明一点的就是password中是不能显示中文的， 直接贴代码，有点基础的应该都能看懂      type="text" value="请输入密码" id="pw" onfocus="if(value=='请输入密码'){value=''}this.type='password'" onblur="show_pw()">     fu
input password显示明文密码
wxl1390的博客
04-09 1430
input type='password' 显示明文密码
关于谷歌浏览器input框自动填充账号密码问题
scdn_wyy的博客
06-12 1813
在谷歌浏览器中，点开网站，输入账号密码后会弹出保存提示
Input输入框默认显示为密码
想成为大牛的菜鸟
05-06 6717
Input输入框默认显示为密码 1.     须求说明 登陆界面须要如图下图效果，如果采用时。当用户输入的密码成了明文，这是不符合要求的。当把的type属性改为passowrd时。默认的“密码”成了“·· ”。有人会想到用js来动态改变input的type属性，这种方法在某些浏览器去可行的如：火狐。但遇到万恶的IE去拿它没法。在IE中，input的type属性为只读。为了解决各浏览器的兼容问题
input password 不自动填充
csl的博客
04-06 4911
编写账户注册的页面遇到了些小麻烦，type为password的input总是被缓存自动填充 解决这一问题找了许多资料大多数如资料一，不过对于我并不适用。 于是我找到了资料二，这里面的一些答案可以使用，不过要注意几点。 代码环境（chrome） 问题代码（利用登入的页面进行说明），这里的密码会被自动填充，如图1 登入系统 ×
html input标签 密码文本框 password
qq_42265536的博客
12-22 1万+
语法： &lt;input type="password" &gt;   密码文本框的重要属性与 text 一致 value ： 定义文本框的默认值，也就是文本框内的文字 siae : 定义文本框的长度，以字符为单位 maxlength : 设置文本框中最多可以输入的字符数 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
input type=“password“密码自动带入密码如何解决
张木期的博客
11-15 9004
用input type="password"密码框，浏览器会自动带入密码，可以加个autocomplete=“new-password” 比如 <a-input-password v-model="password" style="width:370px;margin-left:10px;" placeholder="8-15个字符，必须同时包含数字、英文、特殊符号" autocomplete="new-
HTML之表单标签中input的属性type =“password“时“没眼睛”问题（无法主动显示或是隐藏密码）
m0_53190754的博客
03-03 2945
html写表单提交时人，如用户名以及密码，type = "password"密码被隐藏，无法查看;type = "text"，密码被显示无法隐藏。代码如下edge浏览器在运行html时，会给type = "password"的input自动加上可以睁开或是闭上的眼睛图标，用来显示或隐藏密码。但是chrome不会，得自己封装实现。
htm input密码输入框 不要记住密码
12-31
### 如何禁用浏览器自动保存密码功能 为了防止浏览器记住 HTML 输入框中的密码，可以采取多种方法来实现这一目标。这些方法主要通过修改表单属性以及利用特定的元标签来阻止浏览器的行为。 #### 方法一：使用 `autocomplete` 属性 在 `<form>` 或者具体的 `<input>` 标签上设置 `autocomplete="off"` 可以指示浏览器不要为该字段提供自动完成建议： ```html <form action="/submit" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" autocomplete="off"><br><br> <button type="submit">Submit</button> </form> ``` 这种方法适用于大多数现代浏览器，并能有效减少不必要的自动填充行为[^1]。 #### 方法二：动态创建输入元素 另一种策略是在 JavaScript 中动态创建密码输入域而不是直接将其写入静态 HTML 文件中。这样做的好处是可以绕过某些情况下浏览器对固定 DOM 结构的记忆机制。 ```javascript const form = document.querySelector('form'); let passwordInput; function createPasswordField() { const div = document.createElement('div'); passwordInput = document.createElement('input'); passwordInput.type = 'password'; passwordInput.name = 'dynamic_password'; div.appendChild(passwordInput); form.insertBefore(div, form.firstChild); } // 调用函数创建密码输入框 createPasswordField(); ``` 此技术特别适合那些希望完全控制页面加载时发生的事件的应用程序开发人员。 #### 方法三：改变输入类型的顺序 有时简单地调整输入字段的排列方式也能达到预期效果。例如先定义一个隐藏的假密码字段再放置真实的登录凭证区域，这有助于混淆浏览器对于实际敏感数据位置的认知。 ```html <!-- 隐藏的虚假密码字段 --> <input style="display:none;" type="password"> <!-- 正常使用的用户名和密码字段 --> <label>Username:</label> <input type="text" name="real_username"/><br/> <label>Password:</label> <input type="password" name="real_password"/> ``` 这种做法虽然看似简单粗暴但却意外的有效，尤其是在处理较老版本浏览器时。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值