解决input自动填充的问题

最新推荐文章于 2025-05-24 17:00:19 发布

原创最新推荐文章于 2025-05-24 17:00:19 发布 · 5.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

前端专栏收录该内容

6 篇文章

订阅专栏

本文主要讨论了在谷歌浏览器中遇到的input自动填充问题，该问题可能由于浏览器的记住密码功能引起。虽然一些解决方案可以阻止自动填充，但会导致登录页面无法便捷地填充账号和密码。作者提出了一种方法，即在表单中添加一个隐藏的密码框来解决这一矛盾。此外，还提到了通过JavaScript控制input的type属性变化的替代方案，但认为这种方法较为复杂。

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

这个问题在谷歌浏览器中出现，最终解决。这个问题查了一些资料说是谷歌浏览器的一个bug，并且一直不解决，不知道其他浏览器有没有，没做测试。

出现自动填充大多是因为记住密码的问题而导致，网上的一些方法说这样设置就没没问题了。

用户名：<input type='text' autocomplete='off'> 
密码：<input type='password' autocomplete='new-password'>

这样做的确能解决自动填充的问题，但是登录页就没办法自动填充账号密码，用户就得手动输账号密码登录了。

我的解决方法是在表单元素前添加一个隐藏的密码框，如果password不行就换text试试

<input type="password" style="display: none;">

网上还有一种方法是js去控制，就是用户点击输入框的时候对input的type类型进行变化，个人觉得比较繁琐

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不要葱花

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

【html】巧妙解决input标签自动填充问题

汪小穆的博客

05-31

5万+

前言：如果是同域名网站，并且曾经在该网站下登录过账号密码，并且选择了记住账号密码。chrome浏览器会对账号密码进行自动填充功能，虽然这功能给我们提供了很多方便，但是也带来了些困扰。一、问题起始 ①当“密码”那项input的type是text的时候并不会出现问题 <label> <span>卡号:</span> <input...

v-model --双向数据绑定

qq_45802159的博客

01-03

3396

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

3 条评论您还未登录，请先登录后发表或查看评论

禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

qq_51667621的博客

06-26

8121

解决input在不同浏览器中自动填充以及填充提示的问题，以谷歌、火狐、Edge(原IE)等浏览器为例，禁止出现自动填充，提高用户隐私和网站的安全性。

使用密码输入框，初始默认值的问题

最新发布

m0_61480985的博客

05-24

271

在Vue3+Element Plus开发中，使用密码框时遇到Chrome浏览器自动填充问题：初始值设为空却显示有值。这是由于浏览器自动填充用户名/密码字段导致的。解决方法是为密码框添加autocomplete=new-password属性，禁用浏览器自动填充功能。示例代码展示如何在el-input组件中应用该解决方案，确保密码框初始状态为空值。

uni-app.07.自动补全插件input-autocomplete的使用

潮汐先生的专栏

05-12

4918

uni-app自动补全插件input-autocomplete的使用前言input-autocomplete的使用1.使用HBuilderX导入插件2.运行示例项目3.存在的问题1).数据过渡曝光2).数据过多页面拉长的问题4.解决问题1).问题一解决方案2).问题二解决方案前言上次使用uni-app开发的司机端总算告一段落了，接下来却开始了真正的噩梦。为什么这么说呢，因为这次开发的是企业管理端，开发内容和具体的业务逻辑都要比司机端要复杂的多，只能硬着头皮上啊，谁叫咱这么「优秀」呢？！o(╥﹏╥)o 我

解决uniapp封装input输入款组件，真机使用每次输入自动填充逗号问题

FUFCY的博客

06-22

1315

解决uniapp输入框真机使用每次输入自动填充逗号问题

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

09-25

在使用谷歌浏览器（Chrome）时，用户可能会遇到一个常见的视觉问题，即当表单启用自动填充功能后，`input` 文本框的背景颜色会变为一种偏黄色（#FAFFBD）。这个问题是由于 Chrome 浏览器为了区分自动填充的信息，会...

清除input自动填充

10-11

清除input在浏览器中自动填充用户名等的情况，JQuery解决，IE8 ，chrome等均可以使用。

Vue+element 解决浏览器自动填充记住的账号密码问题

12-10

以上所述是小编给大家介绍的Vue+element 解决浏览器自动填充记住的账号密码问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！如果你...

uniapp中input框如何不让默认填充账号密码

weixin_51185283的博客

05-19

3286

当浏览器保存了账号密码后，在我们前端页面中就会默认填充我们浏览器保存的账号密码，解决方法：在我们写的input框前面增加两个input，并且将宽高隐藏就可以并且要将Input中的属性autocomplete设置为off 代码： <input type="password" style='width:0;height:0;min-height:0'/> <input type="text" autocomplete="off" style='width:0;heigh..

禁止 input 自动填充

皮蛋很白的博客

09-17

6892

在编写 Form 表单样式的时候，修改自动填充后的 input 样式是很麻烦甚至不可行的，而且还有一些不需要自动填充的场景。自动填充常出现在表单中有 type="password" 的 input 控件，浏览器会在表单加载时候监测到存在 password 的表单控件，然后将保存在客户端的信息自动填充它和相邻的表单控件中。 input 的 autocomplete 表示这个控件的值是否可被浏览器自动填充，设置为 off 表示用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。。

禁止输入框自动填充

liangmaxmin的博客

08-27

665

<label>用户名</label> <input autocomplete="off" type="text" name="username" placeholder="请输入用户名" style="background-color: #fff!important;" readonly onfocus="this.removeAttribute('readonly');" onblur="this.setAttribute('readonly',true);"> .

input 阻止密码框的自动填充

逆风优雅的博客

01-03

804

默认情况下，系统登录的时候，浏览器会自动帮我们填充账号密码。

vue苹果ios用webview 手机验证码自动填充两次bug

江湖的博客

11-05

2500

关键代码： <input pattern="[0-9]*" @input="changeauthCd" class="codeB" type="Number" v-model="thisForm.authCd" placeholder="请输入验证码"> changeauthCd () { if (this.thisForm.authCd.length > ...

禁止input框自动填充

universe的博客

01-27

1511

1、在form表单或者input中使用autocomplete=”off” 2、不让页面读取缓存数据 <meta http-equiv= "Pragma" content= "no-cache" /> <meta http-equiv= "Cache-Control" content= "no-cache" /> <meta http-equiv= "Expires" content= "0" /> 3、对于type=“password”时

html input自动填充,记录下input输入框自动填充的坑，附带解决方法

weixin_39637589的博客

05-31

1374

记录下input输入框自动填充的坑，附带解决方法记录下input输入框自动填充的坑，附带解决方法当自动填充数据后，输入框所展示的效果特别丑，会有自带的填充样式解决方法：可以修改:-webkit-autofill中box-shadow的属性去改变输入框自动填充的颜色input:-webkit-autofill {box-shadow: 0 0 0px 1000px #f8f8f8 inset !i...

input自动填充-Autocomplete

热门推荐

既认准这条路，又何必在意要走多久

08-12

6万+

首先

input禁止自动填充

iorn_mangg的博客

03-01

2365

在form表单或者input中添加autocomplete="off" 属性，不过该属性对chorme浏览器不适用。在其他浏览器中可使用autocomplete="new-password"属性，也可以在真正的input前面添加一个隐藏的input来接受自动填充的数据，要用display="none"，不要用hidden https://blog.youkuaiyun.com/qq_17351067...

【我不熟悉的html】input框关闭自动填充，以及自动填充的下拉列表，autocomlete=“off“ 、修改name属性

有一棵树的博客

10-08

2348

【我不熟悉的html】input框的自动填充autocomlete="off"的使用

el-input 浏览器自动填充怎么解决

09-06

在使用Vue框架的el-input组件时，浏览器自动填充可能会造成一些问题。浏览器自动填充是浏览器根据用户之前的输入记录和记住密码等信息自动填充输入框内容的功能。但是这个功能也许不符合我们的需求，所以需要解决这个问题。解决浏览器自动填充的方法有以下几种： 1. 屏蔽自动填充：可以通过设置input标签的autocomplete属性为off来禁止自动填充。 ```html <el-input v-model="inputValue" :autocomplete="'off'" ></el-input> ``` 2. 修改input事件：通过监听input事件，手动更新数据模型中的值，这样可以覆盖浏览器自动填充的内容。 ```html <el-input v-model="inputValue" @input="handleInput" ></el-input> ``` ```javascript methods: { handleInput() { this.inputValue = this.$refs.input.value; // 获取input框的值并更新数据模型 }, }, ``` 3. 利用setTimeout延迟设置值：使用setTimeout可以使得设置值操作在下一次事件循环开始，从而避免被浏览器自动填充的值覆盖。 ```javascript mounted() { setTimeout(() => { this.inputValue = ''; }, 0); }, ``` 4. 结合JavaScript和Vue的解决方案：在mounted钩子函数中使用JavaScript的代码将input框的值清空，并将其焦点移至其他input元素。 ```javascript mounted() { let input = document.getElementById('inputId'); input.value = ''; let otherInput = document.getElementById('otherInputId'); otherInput.focus(); }, ``` 这些方法可以有效解决浏览器自动填充所带来的问题，根据需要选择适合的解决方案即可。