vue解决el-input text=password时，谷歌浏览器出现自动填充密码

最新推荐文章于 2023-08-23 11:01:14 发布
最新推荐文章于 2023-08-23 11:01:14 发布
阅读量1.0k 收藏 1
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dm123456_/article/details/128453847
版权

谷歌浏览器的自动填充在登录时时非常好用的，但是如果你创建新账号的时候，出现就很不友好！

如图

 其实可以非常简单的处理

使用css 来解决 

在input添加类名

 然后根据类目添加样式

-webkit-text-security:指定要使用的形状来代替文字的显示。

none:无；

circle：圆圈；

disc:圆形；

square；正方形；

 

然后效果就出来了

 当点击icon就进行切换

 完美解决

Dm123456_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-input添加 show-password属性后导致浏览器填充密码 覆盖前一个输入框的解决办法
dyxmzp的博客
01-13 974
如下图在前一个输入框 添加onfocus 功能是 input获取焦点时触发 ，然后添加onchange 功能是失去焦点时触发， 给input一个readonly只读属性默认true ,也就是说当我们没有点击输入框时候还是只读状态，点击输入框后会关闭只读然后可以输入内容，然后在点别的输入框这样失去焦点后又变成只读状态， 这样无论如何都不会导致填充密码时候把前一个输入框覆盖了，auto-complete="new-password" autocomplete=‘off’都没有效果。
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件简述limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number安装yarn add vue-limit-input-group 或者npm ...
element-ui 密码输入框添加show-password属性，打开弹窗会自动填入 密码 + 账户名 问题
Shimeng_1989的博客
11-04 2903
element-ui 密码输入框添加show-password属性，打开弹窗会自动填入 密码 + 账户名 问题
vue element 项目：谷歌浏览器自动填充input处理方案
猛男博客
05-25 4878
项目中经常性的遇到当表单 form 里面有这种input框`type=‘password’`的时候，浏览器会`自动填充`input，很明显，这也太丑了！！！
解决 Element的el-input 密码输入框浏览器自动填充账号密码问题
lucky_Mather的博客
11-17 2394
Element的el-input 密码输入框浏览器自动填充账号密码问题
CSS解决谷歌自动填充密码el-input背景颜色错乱问题，字体间距以及渐变色
weixin_54129994的博客
08-17 914
css
vue 解决密码框 input 中type=“password“时，chrome浏览器会回显之前保存的用户名和密码
我心中有猛虎 细嗅蔷薇
01-15 3322
现象 input的type="password"时，会出现之前保存的用户名和密码回显出来 解决办法 给input加上如下属性 <el-input v-model=xxx type="password" autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly');this.type='password'" placeholder="password" /> ...
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中el-input绑定键盘按键(按键修饰符)
11-20
但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件...
vue-currency-input:轻松输入Vue.js的货币格式数字
04-28
Vue货币输入 Vue货币输入插件可轻松输入货币格式的数字。 它提供了一个独立的...npm install vue-currency-input # OR yarn add vue-currency-input 在您的main.js添加Vue插件： import Vue from 'vue' import V
解决谷歌浏览器给输入框input自动填充密码问题
weixin_30682415的博客
09-19 560
这时候我们可能会在 input上 加上autocompleted="off"这个属性来阻止input被自动填充。 1 2 <input type="text" name="userName" autocompleted="off" /> 3 4 <input type="password" name="password"...
vue记住密码，自动填充密码
最新发布
weixin_43410094的博客
08-23 680
【代码】vue记住密码，自动填充密码。
解决 element的el-input 输入框/普通input输入框 浏览器自动填充账号密码问题
weixin_42716945的博客
07-07 4186
一 先说一下普通input输入框保存历史记录的解决方法 在input输入框中加autocomplete="off"属性 可去除历史记录 二element的el-input 输入框 填充历史记录 解决方法 浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内 在登陆页面 这是正常的 但进入系统后 随便打开一个类型为password的输入框 页面就会自动填充对应的账号密码 解决方法 ：在type为passworld的input中加auto-complete=...
解决 el-input 密码输入框浏览器自动填充账号密码问题
weixin_58224449的博客
11-08 1422
通常情况下，浏览器会默认将已保存的账号密码 填充到 input type 值为password的输入框内，如果在登录页面，这当然是非常好的，自动填充密码可以节约时间，提高良好的使用体验，这样当然是没有什么问题的但是如果在注册页面、新增账号等页面，这种操作 就是超出需求了（有点多此一举）
vue+element下Google浏览器自动填充并且数据错位
weixin_44990342的博客
07-10 972
vue+element下Google浏览器自动填充并且数据错位
Vue监听谷歌浏览器自动填充
m0_37311693的博客
02-24 605
绞尽脑汁想到了这个方法，因为自动填充后的input输入框背景颜色是有变化的，所以可以监听input的背景颜色来控制登录按钮是否可以点击。可是谷歌浏览器会自动填充，填充完了还走不可点击的样式，就导致登录保存了账号密码后，再次进入登录页面，按钮是不可点击的。尝试了获取input的值，尝试了模拟点击（点击页面可以获取到input的值，但是模拟点击获取不到），都不得行。开发中遇到问题，登录的时候账号密码有值，登录按钮可以点击，账号密码为空则不可点击。
浏览器自动填充前端项目用户名和密码bug
2301_76431401的博客
08-14 185
在密码el-input 加上show-password autocomplete="new-password"即可。
vue项目中用于解决谷歌浏览器默认填充账号密码问题
千里之行，始于足下！
03-27 1756
最近使用vue+elementui搭建的项目中出现一个需求：谷歌浏览器第一次登录保存账号密码之后，后续在碰到需要输入账号密码时，浏览器会默认填充账号密码，现在需求是不想要账号密码默认填充的效果 解决方案： 1、在账号输入的元素上加上 auto-complete=“new-accounts” 2、在密码输入的元素上加上 auto-complete=“new-password” 最后强调： a...
vue2 el-input type=textarea disabled怎么修改placeholder颜色
06-08
对于 `type='textarea'` 的 `el-input` 组件，你可以通过下面的 CSS 代码来修改禁用状态下的 placeholder 颜色： ```css .el-input.is-disabled textarea::-webkit-input-placeholder { color: #999; /* 你想要的颜色 */ } .el-input.is-disabled textarea::-moz-placeholder { color: #999; /* 你想要的颜色 */ } .el-input.is-disabled textarea:-ms-input-placeholder { color: #999; /* 你想要的颜色 */ } ``` 在这个代码中，`.el-input.is-disabled` 选择器选择了禁用状态下的输入框，`textarea::-webkit-input-placeholder`、`textarea::-moz-placeholder` 和 `textarea:-ms-input-placeholder` 选择器分别选择了不同浏览器中的 placeholder 文本。你可以修改 `color` 属性的值来改变 placeholder 的颜色。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值