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

效果图
一、主要代码之el-input
二、主要代码之input

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

效果图

一、主要代码之el-input

<el-form-item label="密码:"><el-inputv-model="item.password"size="small"show-passwordauto-complete="new-password":readonly="readonlyFlag"@focus="handlerIpClick"></el-input></el-form-item>readonlyFlag: true,handlerIpClick() {this.readonlyFlag = false
},

二、主要代码之input

问题：如题，在谷歌浏览器中，有时input标签会自动填充数据，如用户名密码等。。。
解决：给input标签加上autocomplete属性，
如果是type=“text”就加上autocomplete="off"属性，
如果type=“password”，就加上autocomplete="new-password"属性(见下图)

<input:type="showType"v-model="item.password":autocomplete="showFlag ? 'off' : 'new-password'"
/>
<div @click="showPassword"><svg-icon v-if="showFlag" iconClass="password-open"></svg-icon><svg-icon v-else iconClass="password-close"></svg-icon>
</div>showFlag: false,
showType: 'password',showPassword() {this.showFlag = !this.showFlagthis.showType = this.showFlag ? 'text' : 'password'
},

链接: https://blog.csdn.net/weixin_44191318/article/details/125386427
链接: https://blog.csdn.net/hi1234560/article/details/118487828

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

html5自动填充账号密码,谷歌浏览器怎么自动填充账号密码？自动填充账号密码的方法分享...
谷歌浏览器自动填充账号密码方法图文教程,相信有很多小伙伴对此存在疑惑,接下来就跟着IEfans小编一起了解一下谷歌浏览器自动填充账号密码方法图文教程吧! 谷歌浏览器自动填充账号密码方法: 方法一: 首 ...
Chrome谷歌浏览器自动填充账号密码样式
在Chrome自动填充默认样式 Chrome自动填充账号和密码之后,他输入框会有一个他自带的样式,黄色的或者白色的: 技术栈Vue +element组件库. .el-input__inner {hei ...
解决 Element的el-input 密码输入框浏览器自动填充账号密码问题
问题描述通常情况下,浏览器会默认将已保存的账号密码填充到 input type 值为password的输入框内,如果在登录页面,这当然是非常好的,自动填充密码可以节约时间,提高良好的使用体验 ...
vue项目中解决谷歌浏览器默认填充账号密码问题
谷歌浏览器第一次登录保存账号密码之后,后续在碰到需要输入账号密码时,浏览器会默认填充账号密码. 项目是vue + element-ui搭建的后台管理系统,不想要账号密码默认填充的效果该怎么办呢? 直接 ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
基于Antd Input组件自定义Input的成功状态
前言 Ant Design的Input组件的有一个状态的Api 需求公司自研UI组件,在Antd的基础上进行开发.其中Input组件除了警告与错误状态外,还增加了成功的状态.如下图⬇️ 开发实现方 ...
Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...
问题：浏览器自动填充input密码框
问题浏览器会默认将已保存的账号密码自动填充到input为type="password"的输入框内(autocomplete="off"不起作用),type ...
谷歌浏览器账号密码自动填充和明文显示问题
最近在项目中遇到谷歌会自动填充账号密码并且点击有明文提示的问题,查阅资料结合理解最终解决问题.现总结如下: 1.上图很明显看到点击后有明文提示,在登录页面时我们或许需要登录提示.但是在其它页面出现这 ...

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

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

效果图

一、主要代码之el-input

二、主要代码之input

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

最新文章

热门文章