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

原创已于 2024-03-25 18:44:49 修改 · 3.7k 阅读

1 ·

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互不影响

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

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

handsome_man__

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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的区别？

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

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 ...

在 Vue 2 + Element UI 中实现密码显示/隐藏切换功能

最新发布

qq_46422994的博客

10-13

1198

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

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>

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 &lt;!--修改密码--&gt; &lt;el-dialog width="40%" ...

【element-ui】使用 show-password 切换显示和隐藏后，鼠标焦点跑到最前面去了，怎么解决？（实测有效）

龙丨行的博客

06-03

2059

直接升级版本到 2.15.2 就可以了，亲测有效！！！！你们可以直接找个在线运行页面直接测试。测试方法： https://element.eleme.cn/#/zh-CN/component/input 下的密码框右下方有个在线运行，点击运行。可以注意到2.15.2 版本的就可以，而 2.13.2 或者2.14.1 的就不行。（我的就是 2.13.2）其他：有个奇怪的网站，我留言解决方法，它还要审核！！！！！审核就算了，还要一些时间，我这暴脾气，受不了，直接发了~ ...

Vue+element el-table中显示隐藏and重置密码功能

学习记录

01-20

5707

前言：这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！ 1. 功能起源 element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-password 属性在表格中就不能使用了于是自己冥思苦想想到了一个方法，可以在表格中显示、隐藏

修改密码的实现 -- element UI

elephant_my的博客

01-13

1747

直接上代码 <el-form :model = "ruleForm" :rules = "rules" ref = "ruleForm" :label-position="labelPosition" class = "ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"&g

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 为步长进行调整。