el-input去掉自动填充

最新推荐文章于 2025-04-07 15:45:15 发布

小西↬

最新推荐文章于 2025-04-07 15:45:15 发布

阅读量360

点赞数 2

分类专栏： vue 文章标签： javascript vue

本文链接：https://blog.youkuaiyun.com/weixin_43671128/article/details/146549903

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

添加autocomplete="new-password"属性

<el-input ref="password" v-model.trim="loginForm.password" :type="passwordType"
 prefix-icon="el-icon-lock" placeholder="请输入密码" autocomplete="new-password" />

在这里插入图片描述
虽然不会自动填充但是点击密码还是有浏览器记住的密码

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小西↬

关注关注

2
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

完成有背景图的透明登录框效果，包含el-input框的样式修改

weixin_54241625的博客

04-09

7511

透明登录框设置个人记录想要设置一个有背景图片的透明颜色登录框，且有立体感采用的是element-ui组件中的el-form,此文章主要记录css的编写最后的实现效果图为配色方面有待提高，但基本视觉效果实现，话不多说，见代码整体结构如下 <div class="login"> <div> <el-form label-width="60px" class="login_form" :model="loginForm" :rules

如何使用el-input组件去除浏览器自动填充账号密码

weixin_44191318的博客

06-21

9606

如何使用el-input组件去除浏览器自动填充账号密码

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

避免 el-input 密码自动填充的实用方法

m0_67793437的博客

08-14

1944

在开发 Web 应用时，通常需要避免浏览器自动填充密码。以下是一些可行的解决方案，特别针对使用 Element UI 框架的el-input组件。

el-input限制只能输入数字

weixin_50976410的博客

04-07

399

【代码】el-input限制只能输入数字。

element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码

MISS_zhang_0110的博客

09-13

3965

1.使用element中el-input自带的属性auto-complete（版本二可用）,但是值不能按照官网而要改成new-password。2.使用el-input组件的只读属性（是否）readonly，开始要input框为只读，readonly = “true”。3.注册聚焦事件focus，控制readonly的属性值（true，false）。

el-input取消浏览器自动填充问题

weixin_38684316的博客

04-15

5224

项目中需求不需要显示浏览器自动填充的内容，可以使用以下操作 <el-input v-model="value" auto-complete="off" placeholder="请输入..."></el-input> 主要是这个 auto-complete=“off” 可以实现效果 ...

密码框禁止自动填充

pspxuan的博客

06-14

401

密码框禁止自动填充。

问题（05）elementui 输入框里面禁止浏览器自动填充用户名密码、弹出浏览器历史密码提示框

dugujiuding的博客

06-14

1951

elementui 输入框里面禁止浏览器自动填充用户名密码、弹出浏览器历史密码提示框

清除input自动填充

10-11

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

<el-input type="password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')" ></el-input>强制关闭浏览器自动填充失败

02-21

他们用了Vue的Element UI的el-input组件，设置了type为password，autocomplete为off，还有readonly属性，并且在onfocus事件中去掉了readonly。但这个方法似乎没奏效，浏览器还是自动填充了。首先，我得回忆一下...

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

12-10

我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉不行,我的代码必须由我...

我现在要改成el-input了，如何限制只能输入数字

最新发布

05-28

好的，我现在需要解决用户的问题：在ElementPlus的el-input组件中限制只能输入数字，并实现类似el-input-number的功能，比如补零操作，比如长度为4，前面补0。同时还要模拟el-input-number的行为。让我仔细思考一下...

禁止浏览器表单自动填充

木木木华的博客

02-23

853

禁止浏览器表单自动填充

input去除自动填充后样式

liyoro的专栏

05-25

1442

input去除自动填充后样式常见于登录页面，浏览器设置了记住密码后，input会自动填充内容，造成填充内容后的input会变色，色值不定，反正就是不好看。原因 input自动填充的样式是用Shadow-dom的方式实现的，游离于DOM 树之外的节点树，不好通过css直接修改。要开启谷歌浏览器的Show user agent shadow DOM设置才能看到对应的css。解决方法 1、关闭自动填充表单功能此方式对直接用form和input写的页面有效，对一些封装的第三方UI不大友好，例如eleme

【vue解决el-input组件自动填充用户名密码】

xiejunlan的博客

06-19

859

解决el-input组件自动填充用户名密码

清除 vue input 自动填充

ftally的博客

08-25

390

【代码】清除 vue input 自动填充。

取消浏览器页面中输入框的值自动填充功能

donghua201的博客

09-28

434

【代码】取消浏览器页面中输入框的值自动填充功能。

el-input组件去除浏览器自动填充密码

qq_36022463的博客

06-08

860

引用：https://huaweicloud.youkuaiyun.com/63a00407dacf622b8df90f85.html。这个是针对webkit浏览器（chrome或者 safari）的私有属性，，其他浏览器可能不起作用。: 是一个 webkit 的私有属性：将文本显示为实心圆点，从而隐藏密码的可见字符。

input输入框阻止浏览器默认填充的解决方案总结

qq_44833124的博客

02-20

5771

通常在前端开发的过程中，使用表单中加入输入框来实现登录注册是十分常见的，一些浏览器就会默认填充我们曾经使用过的账号密码，这个处理方式对于登录的时候是非常方便，但是对于注册页面，显然自动填充就非常鸡肋。博主在解决这个自动填充问题的时候用了以下几种方法，都没有很完全的得到解决（不同浏览器兼容性问题），本人使用的是谷歌浏览器。

<input type="text" readonly="readonly" autocomplete="off" placeholder="请选择" class="el-input__inner" style="height: 44px;" disabled="disabled">怎么让这个输入框能够输入

03-12

<think>好的，我现在需要帮助用户解决如何让一个带有特定属性的输入框能够输入的问题。用户提供的HTML代码显示，这个输入框被设置为`readonly`、`disabled="disabled"`，并且`autocomplete="off"`。首先，我得分析这些属性各自的作用。首先，`readonly`属性会让输入框变为只读，用户不能修改其内容，但内容仍然可以选中和复制。而`disabled`属性不仅使输入框不可编辑，还会使其变灰，无法获得焦点，且数据在表单提交时不会被发送。这两个属性同时存在的话，输入框会被完全锁定。因此，要让输入框能够输入，必须同时移除这两个属性。接下来是`autocomplete="off"`，这个属性通常用来阻止浏览器的自动填充功能。虽然它不影响输入框的可编辑性，但用户可能希望保留或移除它，这取决于具体需求。如果需要自动填充功能，可以去掉这个属性；否则可以保留。然后，我需要检查是否有CSS样式可能影响输入框的可编辑状态。例如，用户提供的代码中有`style="height: 44px;"`，这仅设置高度，不会影响功能。但有时候可能会有其他样式比如`pointer-events: none;`或`background-color: #eee;`导致输入框看起来不可用，这时候需要调整CSS。此外，JavaScript事件监听器也可能阻止输入。例如，如果有`onkeydown`事件返回false，或者阻止默认行为，这需要检查并修改相应的JavaScript代码。总结步骤应该是：首先移除`readonly`和`disabled`属性，然后处理`autocomplete`根据需要，接着检查CSS和JavaScript是否有其他限制。同时，可能需要调整样式，比如移除灰色背景，让输入框看起来可编辑。在回答用户时，需要分步骤说明，确保他们能一步步操作。同时，要提醒用户考虑这些修改后的影响，比如表单提交时是否要包含该字段，以及是否需要重新启用自动填充等。</think>要让这个被禁用的输入框恢复可输入功能，需要按以下步骤修改HTML属性： $\boxed{分步解决方案}$ 1. **移除只读属性** - 删除 `readonly="readonly"` - $\Rightarrow$ 原代码：`<input type="text" readonly="readonly"...>` - $\Rightarrow$ 修改后：`<input type="text"...>` 2. **移除禁用属性** - 删除 `disabled="disabled"` - $\Rightarrow$ 原代码：`...disabled="disabled">` - $\Rightarrow$ 修改后：`...>` 3. **可选处理自动填充** - 根据需求选择是否保留 `autocomplete="off"` - 如果需要浏览器自动填充建议，可改为 `autocomplete="on"` 4. **最终可编辑版本** ```html <input type="text" autocomplete="off" placeholder="请选择" class="el-input__inner" style="height: 44px;"> ``` $\boxed{补充说明}$ - 如果页面存在JavaScript控制逻辑，还需检查相关事件监听（如`oninput`/`onkeydown`） - 样式建议：移除原`style="height:44px"`中的灰色背景（如有），可添加`background-color: white` - 表单提交：修改后该输入框的值将参与表单提交通过上述修改，这个输入框将具备完整的键盘输入、焦点获取、内容编辑功能。