解决：el-input设置show-password属性后，谷歌浏览器自动填充之前输入的用户名&密码等。

最新推荐文章于 2024-04-08 11:02:53 发布
最新推荐文章于 2024-04-08 11:02:53 发布
阅读量2.6k 收藏 3
点赞数 3
分类专栏： Element-UI组件库 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38969618/article/details/121676484
版权

给当前el-input元素添加属性：autocomplete="new-password"即可。

 

qq_38969618
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
页面记住密码后，去除浏览器自动填充密码效果
live_loves的博客
08-24 449
在做密码框的时候，因为浏览器记住了账户密码，导致输入框自定填充，而且还有背景色，这显然不符合我们的项目需求，这时候我们只需要加上**auto-complete=“new-password”**主要的就是这个代码。 在网上查过很多方法都没用，比如：auto-complete=‘off’，这个在我的项目里面是没用的，上面那个实测有效。代码如下： <el-form-item label="登录密码:" prop="password"> <el-input
el-input自动填充浏览器缓存数据 使用autocomplete=“off“不生效
最新发布
qq_34629527的博客
04-08 262
el-input自动填充浏览器缓存数据
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。 查看实例 教程 此指令依赖于 el[email protected]，使用前请熟悉： el[email protected] el[email protected] 安装 npm install --save el-table-infinite-scroll 全局引入 import Vue from 'vue'; import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); 局部引入 [removed] import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { directi
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
element Ui 实现密码的显示与隐藏
明思齐的博客
04-21 4051
(输入框类型为密码，即所输入的内容都是以“密文”形式展示)点击查看小图标就可以查看了。我原先给密码输入框设置了。
el-input添加 show-password属性后导致浏览器填充密码 覆盖前一个输入框的解决办法
dyxmzp的博客
01-13 936
如下图在前一个输入框 添加onfocus 功能是 input获取焦点时触发 ，然后添加onchange 功能是失去焦点时触发， 给input一个readonly只读属性默认true ,也就是说当我们没有点击输入框时候还是只读状态，点击输入框后会关闭只读然后可以输入内容，然后在点别的输入框这样失去焦点后又变成只读状态， 这样无论如何都不会导致填充密码时候把前一个输入框覆盖了，auto-complete="new-password" autocomplete=‘off’都没有效果。
解决使用elementUI密码输入框自带属性show-password出现的问题
handsome_man__的博客
06-09 2699
前提：浏览器有缓存密码 场景：一个el-form里面有一个时间框el-date-picker和一个密码框el-input，密码框使用show-password 问题：当选择缓存密码时，同时有用户名和密码，会自动打开el-date-picker选择器，这只是举个例子，当然，如果密码框上个结构都有可能影响到 解决办法：用多个el-form包裹这些组件就行，el-form互不影响...
element ui input输入框
qq_45030898的博客
01-04 3117
目录 1.简洁输入框 2.密码输入框（show-password) 3.带 icon 的输入框 4.文本域 5.复合型输入框 6.尺寸 7.带输入建议 8.输入长度限制 9.远程搜索 1.简洁输入框 clearable为清空按钮 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="创建人"> <el-input v-model="fo.
【ElementUI】 Input组件
FangNiuDaHu的博客
06-07 878
本文章讲究ElementUI Input组件常用属性，加强组件化思想。理解源码，提高开发效率，方便排查问题。
el-input 密码输入框 显示隐藏优化
记录技术的小本本
11-01 1971
el-input 密码输入框 显示隐藏优化，且兼容Edge
el-input 标签中密码的显示和隐藏功能的实例代码
10-16
本文通过实例代码给大家介绍了el-input 标签中密码的显示和隐藏 ,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
limit-input-group -S 依赖element-ui/el-input-number 属性max：所有输入总和最低值min：所有输入总和最低值事件大于（newVal，overVal，maxVal）：当控件总和超过最小值参数解释newVal：当前输入的值overVal：剩余...
element input组件常用属性用法
yangfeixiang001的博客
10-09 1万+
在vue项目中肯定会用到element组件库，里面的input组件的用法和常用属性如下： ** 1，type属性：用法跟原生输入框一样，例：type=“text”，type=“password”,进行输入框的类型设置 2，value 或 v-model：用于输入框内的数据进行双向数据绑定，例：value=“name”,或v-model=“name” 3，maxlength属性和minlength属性："maxlength"用于现在输入框最多输入的字符，同理 “minlength” 用于输入框最少输入的字符
vue基于element-ui input为密码框时进行密码隐藏与显示，并且不自动进行回显
m0_52263688的博客
04-06 2522
vue基于element-ui input为密码框时进行密码隐藏与显示，并且不自动进行回显 只需在代码中添加 show-password 和 auto-complete="new-password"两个属性即可实现，代码如下： <el-form-item label="用户密码:" prop="passwd" :label-width="formLabelWidth">
element-ui2.0 el-input密码框是否切换图标更换
m0_56551688的博客
08-23 809
在element-ui2.0中input方法中有show-password 可以显示图标，但是只有睁眼效果，所以我们就需要手动来修改了。这里需要用v-if来控制有输入的时候聚焦显示，失焦时输入框有值就显示，没有值就不显示。el-inpu给我们提供了插槽，控制控制图标显示的在computed中完成。推荐去看看element-ui 源码。element 官方。
elementui 之input 框总结
zhouzhiwengang的专栏
02-16 1万+
1.elementUI的input框，需要用v-model绑定一个变量，这个变量相当于原生input框的value 2.placeholder属性和原生的一样 <!-- v-model相当于input里的value,必须绑定 --> <el-input v-model="test" placeholder="请输入内容"></el-input> 3.禁用el-input，绑定一个disabled属性即可 <!-- 禁用el-input -->
elementui 里使用input 密码框,输入时禁止弹出浏览器历史密码提示框
u010328533的博客
12-25 1672
解决方案,使用css的 -webkit-text-security: disc;官方api上,使用autocomplete属性不生效。
Element el-input 输入框详解
热门推荐
程序员大阳
02-02 6万+
1. 用途 输入框是使用非常多的元素，用来输入用户名、密码等等信息。Element提供了功能和样式丰富的输入框，本篇就来了解下。 2. 输入框 输入框为el-input，其编译后生成的HTML元素为input，样式class中包含el-input，所以我们首先设定下统一样式，便于演示。 .el-input { width: 200px; } 2.1 输入框基本功能 输入框可以与js变量双向绑定，代码为： 输入框基本功能：双向绑定 <el-input v-model="input1
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(); }, ``` 这些方法可以有效解决浏览器自动填充所带来的问题，根据需要选择适合的解决方案即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值