Vue3 取消密码输入框在浏览器中自动回填

devtools/2024/9/30 4:10:44/

浏览器默认会对用户提交表单行为进行监控,若发现type属性值为password的input控件,且该控件可见时,会提示用户是否记住密码

VUE3登录禁止浏览器记住密码_vue3禁止chome浏览器提示保存密码-CSDN博客

项目需求:

前端禁止在浏览器cookie或lockstorage中存储密码,密码仅在登录人工输入使用后清除本地记录

说人话就是:别让下面图中这个框框弹出来

解决: 

这边经过查阅各网站资料也是解决了,借鉴了vue 登陆禁止弹出保存密码框及禁止默认填充密码_vue浏览器密码输入提示怎么关闭-CSDN博客主要思路就是把输入框的type属性由password改变为text


 简单总结如下:

模版部分

<el-form-item label="密码" prop="keyword"><el-input:ref="passwordRef":type="passwordType":class="pwdClass == true ? 'no-autofill-pwd' : 'no-auto'"v-model="form.keyword"placeholder="请输入密码"><template #suffix><el-icon class="el-input__icon" style="cursor: pointer" @click="showPwd"><Hide v-if="passwordType === 'text'" /> <View v-else/></el-icon></template></el-input></el-form-item>

js部分

import { Hide, View } from '@element-plus/icons-vue'
let passwordType = ref('text')
let pwdClass = ref(true)
let passwordRef = ref()
const showPwd = () => {if (passwordType.value === 'text') {passwordType.value = ''pwdClass.value = false} else {pwdClass.value = truepasswordType.value = 'text'}// nextTick(() => {passwordRef.value.focus()// })
}

css部分(控制输入内容的值和“·”的切换)

.no-autofill-pwd {-webkit-text-security: disc !important;
}
.no-auto {-webkit-text-security: none !important;
}

上面三块可以直接抄作业

仅做记录


http://www.ppmy.cn/devtools/119051.html

相关文章

Python爬虫爬取王者荣耀英雄信息并保存到图数据库

爬取信息说明 英雄名称英雄类型英雄包含的所有皮肤名称 创建英雄类型节点 王者荣耀官方给出的英雄类型是以下几种&#xff1a; 直接准备好英雄类型词典 hero_type_dict [战士, 法师, 坦克, 刺客, 射手, 辅助 ]添加到图数据库中 def create_hero_type_node():for hero_ty…

深度学习后门攻击分析与实现(二)

前言 在本系列的第一部分中&#xff0c;我们已经掌握了深度学习中的后门攻击的特点以及基础的攻击方式&#xff0c;现在我们在第二部分中首先来学习深度学习后门攻击在传统网络空间安全中的应用。然后再来分析与实现一些颇具特点的深度学习后门攻击方式。 深度学习与网络空间…

Redis的数据类型常用命令

目录 前言 String字符串 常见命令 set get mget mset setnx incr incrby decr decyby append Hash哈希 常见命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx List 列表 常见命令 lpush lrange lpushx rpush rpushhx lpop…

CSS开发全攻略

目录 一、CSS基础入门&#xff08;一&#xff09;CSS概述1.CSS的定义与作用2.CSS的历史与发展3.CSS的核心概念&#xff08;1&#xff09;选择器&#xff08;Selector&#xff09;&#xff08;2&#xff09;声明&#xff08;Declaration&#xff09;&#xff08;3&#xff09;规…

【个人笔记】数据一致性的解决方案

保证数据一致性&#xff1a;指保证redis里的数据和mysql的数据是一致的&#xff0c;不能说mysql更新了&#xff0c;但redis里面的还是旧的数据&#xff0c;反之亦然 先说结论&#xff1a;增删改的时候&#xff0c;把Redis中的缓存删了 为什么不先更新数据库&#xff0c;再更新…

免费制作证件照的小程序源码

1、效果展示 证件照制作&#xff0c;证件照免费制作&#xff0c;证件照调用api源码&#xff0c;解析代码。证件照制作小程序包&#xff0c;可以下载程序包&#xff0c;最初级版本免费下载。以上是高级版本。如果你有开发能力的话可以自己写前端&#xff0c;然后以下调用以下api…

5分钟精通Excel在go中的使用

一些简单操作可以在官方文档中找到&#xff0c;应该足够无经验的朋友们入门 介绍 - 《Excelize v2.2 中文文档》 - 书栈网 BookStack 这里贴一个中文版的链接&#xff08;以excelize库为例&#xff0c;相对其他库来说&#xff0c;体验很不错&#xff09;&#xff0c;不过要注…

flink将窗口增量聚合算子和窗口全量聚合算子连用

在flink中&#xff0c;开窗后的聚合方式有两种&#xff0c;增量聚合和全量聚合&#xff0c;前者处理速度快&#xff0c;不积压数据&#xff0c;但是拿不到窗口中全量的信息&#xff0c;后者积压数据但是能拿到窗口内全量的数据。两者各有利弊。 因此滚动聚合窗口和全量聚合窗口…