10.Form表单中Input输入框设置autoComplete=“off“ 不生效

最新推荐文章于 2025-03-07 09:41:02 发布
最新推荐文章于 2025-03-07 09:41:02 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： AntDesignPro踩坑 文章标签： autoComplete AntDesignPro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Gas_station/article/details/134304433
版权
文章讲述了如何在使用antd的Input组件时，防止Chrome自动填充密码。通过设置`<InputautoComplete=new-password/>`可以阻止默认的密码填充行为，实现预期的用户体验。

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

一、问题的描述

  • form表单的 password框 有时候我们并不需要chrome自动填充记住的密码这个效果，如下图

在这里插入图片描述

二 、正常的预期是什么？

输入框获取焦点时，不展示chrome的默认行为。

三、问题产生的原因分析

发现antd的Input组件的 autocomplete=“off” 属性 不生效

四、问题的解决方案

// autoComplete="new-password" 一行解决
<Input type="password" autoComplete="new-password" /> :

OK，收工！如果可以实现记得点赞分享，谢谢老铁～

form表单禁止浏览器自动填充密码
IT博客技术分享
07-12 2402
form表单禁止浏览器自动填充密码
(HTML+CSS)表单属性学习
hjp9906的博客
08-03 2094
表单的构成与创建 一个完整的表单通常由表单元素、提示信息和表单域3个部分构成。 在HTML5中，form标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下。 form action="url 地址" method="提交 方式" name="表单名称"> 各种表单控件 </form 表单属性 表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。 action属性 在表单收集到
autocomplete=“off“ 不起作用解决方案
木辰風的博客
09-14 2889
为了防止浏览器为用户自动填充账号密码，input标签 html5新增属性autocomplete，但这一属性经常出现不起作用的事情，为了解决这一问题，我找到一些解决方法；去掉了一些比较复杂的方法。网上没有找到对其详细解释，但是发现163邮箱的登录注册是这么用的。这种方法是最简单的。autocomplete官方只有"on","off"俩个值，但是"在input框中设置 autocomplete= "修改readonly属性。
表单input浏览器自动填充autocomplete=“off“不生效的解决办法
weixin_45016440的博客
09-13 829
我们在需要填写账号密码的地方使用表单input时，常常会出现表单的自动填充，将浏览器已经保存的用户名密码填充到表单中，但有时我们是不需要这个填充的，就会给input设置属性autocomplete="off"。在某些情况下设置off并没有生效，还是会触发自动填充，这时候，我们可以设置autocomplete的属性为"new-password"，就可以取消表单的自动填充。
【前端】使用autocomplete实现输入框自动补全功能，同时获取输入框的值
最新发布
qq_25285531的博客
03-07 1060
使用autocomplete实现输入框自动补全功能，同时支持动态添加/删除输入框，并获取输入框的值。
autoComplete=“off” 无效
asunny_的博客
05-06 3444
autoComplete=“off” 无效 autoComplete自动填充属性有on/off两个值，但有时候想禁用自动填充效果的时候发现off不奏效。这时候可以随便给autoComplete赋个值就可以，比如auto Complete=“guan” 下面是我自己碰到的一个场景(与题目无关了)： 测试在谷歌浏览器测试时，发现他在浏览器保存了地址信息(包括电话、电子邮件、地址等)之后，在form表单中，虽然只是input框(公司使用的是猪齿鱼)，但是当label字符匹配到之后还是会自己给赋值，但当我第一行如果
form 表单字段 autocomplete 设置为off 后仍然无效的解决方法
weixin_30216561的博客
07-19 849
autocomplete属性是表单字段中的HTML5新属性，该属性有两种状态值，分别为"on" 和 "off"，该属性可省略：省略属性值后默认值为"on"，也可以省略属性名，直接写入关键字on或off。 但是有一种情况例外，就是表单中有input[type="password"]，点击保存密码后，在Chrome浏览器则自动填充了用户名和密码的输入框；为了统一样式，我们需要就对Chrome的问题进...
input标签中autocomplete="off"失效的具体解决办法
younghard的博客
08-16 1万+
废话不说先来看问题 解决的思路： 根据网上的资料得知是因为密码输入框 input type=“password”造成的，所以我的解决思路是先把密码输入框的type="password"改成type="text",然后在获取焦点的时候把它改回来； 解决的具体方法： 1、type="password"改成type="text"； 2、给input标签添加自定义属性 我是这样处理的
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
09-05
2. **移除`<form>`元素**：如果将输入框从`<form>`元素中移除，`autocomplete="off"`设置则可以正常工作，不再受到密码记忆的影响。 解决Firefox中`autocomplete="off"`不生效的问题有几种策略： 1. **使用HTML5的...
Thymeleaf查询表单了，然后点击重置按钮不生效
01-23
### Thymeleaf 表单重置按钮不生效解决方案 在HTML表单中，`<input type="reset">` 或 `<button type="reset">` 应该能够清除表单中的所有输入字段至其初始状态。然而，在使用Thymeleaf时可能会遇到重置按钮无法...
ElementUI的表单验证失效，出现意想不到的问题
Tvv1997的博客
12-07 2780
起因 项目中有一个心理测试模块，需要实现修改功能。 尝试一 页面渲染之前，created时，发送一个请求，拿到该测试问卷的基本信息（名称、简介、测试结果等），该值命名为testData。 created(){ const data = { params: {id: this.$route.query.id} } this.apiGet('***/***/getQues...
input标签中autocomplete=“off“ 失效的解决办法
qq_43506852的博客
10-09 1437
https://blog.csdn.net/dhlctaqzyba39516/article/details/101904541
el-input自动填充浏览器缓存数据 使用autocomplete=“off“不生效
qq_34629527的博客
04-08 849
el-input自动填充浏览器缓存数据
表单 type="password" autocomplete="off" 失效问题 !!!!!!
qq_36948660的博客
09-06 2511
在input 表单中 type="password"时，在谷歌浏览器中，保存密码之后， 会出现使用一下项的密码  在代码中加入autocomplete="off"是没有效果的，差了很多资料，最后发现加入autocomplete="new-password"快速完美解决问题，浪费了很多时间，记录一下！  ...
autocomplete=“off“不起作用，终极解决方案
Li_Ning21的博客
10-23 597
最终采用隐藏一个password 输入框的方式，欺骗一下浏览器，让他把不展示的输入框自动填充，从而保证本来的input框不受影响。
autocomplete="off" 不生效的解决方法
热门推荐
MrLiber的博客
10-20 2万+
The autocomplete attribute is an enumerated attribute. The attribute has two states. The on keyword maps to the on state, and the off keyword maps to the off state. The attribute may also be omitted. ...
html input autocomplete ="off ",有关表单autocomplete = "off" 失效问题解决方案
weixin_35057804的博客
07-04 953
一需朋者说上事是础一发一开程和开数的目前间、autocomple新直能分支调二浏页器朋代说，事刚te介绍autocomplete是Html5中的新属性。该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入的时候，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。该属性适用于，以及下面的类型。text,search,telephone,email...
有关表单autocomplete = “off“ 失效问题解决方案
imkaifan的博客
02-17 637
autocomplete是Html5中的新属性。该属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入的时候，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。该属性适用于，以及下面的类型。text,search,telephone,email,password,datepickers,range以及color.该属性有两个值，on和off。on是默认的，规定启用自动完成功能。off是规定禁用自动完成功能。
处理由于浏览器设置导致的autocomplete="off"失效的问题引起input 黄色背景问题
lucky123star的博客
01-26 433
https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off/34998771#34998771
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端加油站

你遇到的坑将由我来踩

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值