解决使用elementUI密码输入框自带属性show-password出现的问题

原创 已于 2024-03-25 18:44:49 修改 · 3.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue.js #前端

于 2022-06-09 10:26:00 首次发布
博客探讨了在前端开发中，当浏览器缓存密码时，如何处理因密码框与时间选择器在同一el-form内导致的意外开启时间选择器的问题。解决方案是将组件分别放在独立的el-form中，以避免组件间的影响。
部署运行你感兴趣的模型镜像

前提：浏览器有缓存密码
场景：一个el-form里面有一个时间框el-date-picker和一个密码框el-input，密码框使用show-password
问题：当选择缓存密码时，同时有用户名和密码，会自动打开el-date-picker选择器，这只是举个例子，当然，密码框上个结构都有可能影响到
解决办法：用多个el-form包裹这些组件就行，el-form互不影响

您可能感兴趣的与本文相关的镜像

Qwen3-8B

Qwen3-8B

文本生成
Qwen3

Qwen3 是 Qwen 系列中的最新一代大型语言模型，提供了一整套密集型和专家混合（MoE）模型。基于广泛的训练，Qwen3 在推理、指令执行、代理能力和多语言支持方面取得了突破性进展

handsome_man__
关注
Vue+element el-table中显示隐藏and重置密码功能
学习记录
01-20 5707
前言： 这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！ 1. 功能起源 element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。 但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-password 属性 在表格中就不能使用了 于是自己冥思苦想想到了一个方法，可以在表格中显示、隐藏
element-ui的密码验证
weixin_42349568的博客
01-29 1030
<el-form :model="form" :rules="rules" ref="ruleForm" > <el-form-item label="新密码" label-width="200px" prop="passwd"> <el-input v-model="form.passwd" placeholder="密码必须包含字母，数字，特殊字符，且大于8位"></el-input> </el-form-item> </
element-ui 密码输入框添加show-password属性，打开弹窗会自动填入 密码 + 账户名 问题
Shimeng_1989的博客
11-04 3552
element-ui 密码输入框添加show-password属性，打开弹窗会自动填入 密码 + 账户名 问题
显示密码「Show Password」-crx插件
03-20
显示密码 通过此扩展，您可以选择查看密码字段中输入的内容，而不是查看点。每个可以单击的密码字段旁边都会显示一个链接，以显示输入的密码。 支持语言:English
element Ui 实现密码的显示与隐藏
明思齐的博客
04-21 5428
(输入框类型为密码，即所输入的内容都是以“密文”形式展示)点击查看小图标就可以查看了。我原先给密码输入框设置了。
element-ui中的show-password不起作用解决
weixin_42290901的博客
05-17 3652
今天在使用element-ui中密码框，使用show-password属性即可得到一个可切换显示隐藏的密码框，但是发现根本不起作用，分析发现是版本低问题，升级到最新版本即可，如何升级vue中element-ui版本可参考如下链接： https://blog.csdn.net/weixin_42290901/article/details/116935887?spm=1001.2014.3001.5501 ...
ElementUi 输入框ip地址校验-两次密码确认校验
CongJiYong的博客
12-06 1201
校验
2024年基于elementUI的一个使用v-model实现的经纬度输入的vue组件，2024年前端网络编程总结篇
2301_82243710的博客
05-07 1004
空(void)元素有那些？⾏内元 素和块级元素有什么区别？cookies,sessionStorage,localStorage 的区别？Doctype作⽤?了解 this 嘛，bind，call，apply 具体指什么。serviceWorker的使用原理是啥？问：0.1 + 0.2 === 0.3 嘛？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？简述⼀下src与href的区别？
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
标题和描述中提到的知识点是关于如何使用Vue框架结合Element UI组件库来实现密码输入框的显示/隐藏功能以及配合的小图标变化功能。具体实现涉及到Vue的响应式数据绑定、事件处理和条件渲染等核心特性，同时利用...
精选资源
百度地图毕业设计源码-market_liu:基于vue+axios+elementUI的电商管理系统------前端
06-06
密码框加上type="password"属性 表单数据验证(elementui) form对象绑定验证规则:rules="loginRules" 在data中添加验证规则 输入框的外部元素绑定具体的验证规则prop=“username” 由于错误信息是显示在el-form-item...
elementUI之输入框限制数字功能实现
牛先森家的博客
10-18 3069
elementUI之输入框限制数字功能实现 第一种： 使用 oninput 加正则 <div>输入框限制数字</div> <el-input v-model.trim="iptNum1" placeholder="请输入该内容分值" maxlength="3" minlength="1" oninput="value=value.replace(/[^\d]/g,'')" ></el-input>
在 Vue 2 + Element UI 中实现密码显示/隐藏切换功能
最新发布
qq_46422994的博客
10-13 1198
如果你想要使用自己的图标或实现更多自定义功能，可以通过插槽（slot）的方式来自定义后缀图标，并通过绑定事件来切换密码显示状态。使用属性：适用于简单需求，免去繁琐代码。自定义插槽方式：适用于需要自定义图标和更复杂交互逻辑的场景。希望这篇文章能帮助你在 Vue 2 项目中更轻松地实现密码显示/隐藏功能！如果你有任何问题，欢迎在评论区留言交流。
vue Element-Ui 简单实现输入框密码的显示与隐藏
qq_48701993的博客
04-13 1万+
一、效果如下： element-ui 简单实现密码输入框的显示与隐藏 二、实现代码： 只需要在输入框代码中添加 show-password ，然后在你输入密码时会自动出现眼睛图标，点击图标就可以显示和隐藏密码。 <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.passWord" show
el-input添加 show-password属性后导致浏览器填充密码 覆盖前一个输入框的解决办法
dyxmzp的博客
01-13 1424
如下图在前一个输入框 添加onfocus 功能是 input获取焦点时触发 ，然后添加onchange 功能是失去焦点时触发， 给input一个readonly只读属性默认true ,也就是说当我们没有点击输入框时候还是只读状态，点击输入框后会关闭只读然后可以输入内容，然后在点别的输入框这样失去焦点后又变成只读状态， 这样无论如何都不会导致填充密码时候把前一个输入框覆盖了，auto-complete="new-password" autocomplete=‘off’都没有效果。
Edge浏览器中element ui密码输入框Show password属性和 clearable 属性 两个icon会重叠
weixin_71828560的博客
09-26 1791
Edge浏览器中element ui密码输入框Show password属性和 clear 属性 两个icon会重叠
解决：el-input设置show-password属性后，谷歌浏览器自动填充之前输入的用户名&密码等。
qq_38969618的博客
12-02 3010
给当前el-input元素添加属性：autocomplete="new-password"即可。
element设置密码显隐
chengchenghcc的博客
04-05 408
element ui 设置密码显隐 input框中输入： show-password
vue element-ui实现密码显隐的输入框
热门推荐
云的博客
03-06 2万+
因为发现element-ui input的show-password没起作用自己写的。没有新引用icon。 如果引用icon &amp;lt;!--修改密码--&amp;gt; &amp;lt;el-dialog width=&quot;40%&quot; ...
【element-ui】使用 show-password 切换显示和隐藏后，鼠标焦点跑到最前面去了，怎么解决？（实测有效）
龙丨行的博客
06-03 2060
直接升级版本到 2.15.2 就可以了，亲测有效！！！！ 你们可以直接找个在线运行 页面 直接测试。 测试方法： https://element.eleme.cn/#/zh-CN/component/input 下的密码框 右下方有个在线运行，点击运行。 可以注意到2.15.2 版本的就可以，而 2.13.2 或者2.14.1 的就不行。（我的就是 2.13.2） 其他： 有个奇怪的网站，我留言解决方法，它还要审核！！！！！审核就算了，还要一些时间，我这暴脾气，受不了，直接发了~ ...
elementui让输入框只能输入0-100的数字
05-29
可以使用 ElementUI 中的 el-input-number 组件来实现让输入框只能输入 0-100 的数字。 具体实现方法是在 el-input-number 上设置 min 和 max 属性为 0 和 100，如下所示： ```html <el-input-number v-model="value" :min="0" :max="100"></el-input-number> ``` 这样就可以限制用户只能输入 0-100 之间的数字，如果用户输入超出了这个范围的数字，组件会自动进行限制，不会出现输入错误的情况。 另外，如果需要设置步长，可以使用 step 属性，例如： ```html <el-input-number v-model="value" :min="0" :max="100" :step="10"></el-input-number> ``` 这样用户每次增加或减少数值时会以 10 为步长进行调整。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值