当前位置: 首页 > news >正文

vue 项目实现阻止浏览器记住密码

​在各个浏览器中,登录输入密码一般都会弹出是否记住密码的功能,如果记住之后,会在各个密码框自动填充记住的密码,这无疑是一种不安全的操作,所以要实现禁用阻止浏览器记住密码的行为

查阅资料,也得到很多方法

  • 1、使用 autocomplete="off"
  • 2、使用 autocomplete="new-password"
  • 3、在真正的密码框之前增加相同name的input框
  • 4、使用readonly属性,聚焦时移除该属性
  • 5、将type=password改为text,修改样式改为*或者小黑点

以上的方法我试过1、2,测试发现不能完全实现,浏览器记住密码的弹窗还是会弹出,不排除我哪里没改全,3、4没试,因为感觉改动有点多,最终我采纳了第5种方案,代码如下 

 <el-form-item v-if="showPassword" prop="password"><el-inputref="password"v-model="loginForm.password"type="text"class="no-autofill-pwd"placeholder="密码"><svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /></el-input></el-form-item>
.no-autofill-pwd {/deep/ .el-input__inner {-webkit-text-security: disc !important;}
}

在谷歌浏览器以及edge浏览器测试,记住密码功能被禁用,密码也不会自动填充 ​

相关文章:

vue 项目实现阻止浏览器记住密码

​在各个浏览器中&#xff0c;登录输入密码一般都会弹出是否记住密码的功能&#xff0c;如果记住之后&#xff0c;会在各个密码框自动填充记住的密码&#xff0c;这无疑是一种不安全的操作&#xff0c;所以要实现禁用阻止浏览器记住密码的行为 查阅资料&#xff0c;也得到很多…...

7. 一分钟读懂“单例模式”

7.1 模式介绍 单例模式就像公司里的 打印机队列管理系统&#xff0c;无论有多少员工提交打印任务&#xff0c;大家的请求都汇总到唯一的打印管理中心&#xff0c;按顺序排队输出。这个中心必须全局唯一&#xff0c;避免多个队列出现资源冲突&#xff0c;保证打印任务井然有序。…...

28个炫酷的纯CSS特效动画示例(含源代码)

CSS是网页的三驾马车之一&#xff0c;是对页面布局的总管家&#xff0c;2024年了&#xff0c;这里列出28个超级炫酷的纯CSS动画示例&#xff0c;让您的网站更加炫目多彩。 文章目录 1. 涌动的弹簧效果2. 超逼真的3D篮球弹跳&#xff0c;含挤压弹起模态3. 鼠标放div上&#xff0…...

百问FB网络编程 - 主要函数介绍

6.3 网络编程主要函数介绍 下面全部函数的头文件都是 #include <sys/types.h> #include <sys/socket.h>6.3.1 socket函数 int socket(int domain, int type,int protocol);此函数用于创建一个套接字。 domain是网络程序所在的主机采用的通讯协族(AF_UNIX和AF_I…...

Unity类银河战士恶魔城学习总结(P155 More example on audio effects更多的音效细节)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节添加了更多的音效细节 音频管理器 AudioManager.cs 使得多个音效可以同时播放&#xff0c;注释掉以下代码 public void PlaySFX(in…...

【题解】—— LeetCode一周小结48

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结47 25.网络延迟时间 题目链接&#xff1a;743. 网络延迟时间 …...

040集——CAD中放烟花(CAD—C#二次开发入门)

效果如下&#xff1a; 单一颜色的烟花&#xff1a; 渐变色的火花&#xff1a; namespace AcTools {public class HH{public static TransientManager tm TransientManager.CurrentTransientManager;public static Random rand new Random();public static Vector3D G new V…...

一文理解多模态大语言模型——下

作者&#xff1a;Sebastian Raschka 博士&#xff0c; 翻译&#xff1a;张晶&#xff0c;Linux Fundation APAC Open Source Evangelist 编者按&#xff1a;本文并不是逐字逐句翻译&#xff0c;而是以更有利于中文读者理解的目标&#xff0c;做了删减、重构和意译&#xff0c…...

ROS2创建 base 包用于其他模块的参数配置和头文件依赖

Demo 背景 ROS2项目开发中存在以下需求&#xff1a;有多个包需要读取一些共同的配置项(以txt或者yaml形式存在&#xff09;&#xff0c;且依赖于一些公用的utils工具代码(C)。Solution: 创建一个 base_config 包来“存放” 配置文件和公用的头文件。gitee address: Gitee/CDal…...

自然语言处理期末试题汇总

建议自己做&#xff0c;写完再来对答案。答案可能存在极小部分错误&#xff0c;不保证一定正确。 一、选择题 1-10、C A D B D B C D A A 11-20、A A A C A B D B B A 21-30、B C C D D A C A C B 31-40、B B B C D A B B A A 41-50、B D B C A B B B B C 51-60、A D D …...

前端热门面试题目(四)——计算机网路篇

计算机网络常见面试题&#xff1a; 计算机网络面试&#xff08;一&#xff09; 计算机网络面试&#xff08;二&#xff09; 计算机网络速成&#xff1a; 计算机网络速成一 计算机网络速成二 计算机网络速成三 2. HTTP 1.0 和 2.0 的区别 连接复用&#xff1a; HTTP/1.0 使用短连…...

kubenetes流水线实施清单

整体实施方案概述 创建命名空间&#xff08;Namespace&#xff09;&#xff1a;创建一个专用于 CI/CD 的命名空间 cicd。配置 Secrets&#xff1a; Git SSH 密钥&#xff08;分别为 Maven 和 npm 项目&#xff09;Docker Registry 凭证&#xff08;Kaniko&#xff09;SMTP 凭证…...

Redis4——持久化与集群

Redis4——持久化与集群 本文讲述了1.redis在内存占用达到限制后的key值淘汰策略&#xff1b;2.redis主从复制原理&#xff1b;3.redis的哨兵模式&#xff1b;4.redis集群模式。 1. 淘汰策略 设置过期时间 expire key <timeout>只能对主hash表中的键设置过期时间。 查…...

【LeetCode: 94. 二叉树的中序遍历 + 栈】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…...

Python系列 - MQTT协议

Python系列 - MQTT协议 资源连接 MQTT的介绍和应用场景的示例说明 一、什么是MQTT 百度关于MQTT的介绍如下&#xff1a; MQTT(消息队列遥测传输)是ISO 标准(ISO/IEC PRF 20922)下基于发布订阅范式的消息协议。它工作在 TCP/IP协议之上&#xff0c;是为硬件性能低下的远程设…...

同时在github和gitee配置密钥

同时在github和gitee配置密钥 1. 生成不同的 SSH 密钥 为每个平台生成单独的 SSH 密钥。 # 为 GitHub 生成密钥&#xff08;默认文件路径为 ~/.ssh/github_id_rsa&#xff09; ssh-keygen -t rsa -b 4096 -C "your_github_emailexample.com" -f ~/.ssh/github_id_…...

Runway 技术浅析(六):文本到视频(Text-to-Video)

1. 核心组件与工作原理 1.1 自然语言处理&#xff08;NLP&#xff09; 1.1.1 文本解析与语义理解 文本到视频的第一步是将用户输入的自然语言文本解析为机器可理解的语义信息。Runway 使用预训练的 NLP 模型&#xff0c;如 GPT-3 和 BERT&#xff0c;这些模型通过大规模文本数…...

云计算vspere 安装过程

1 材料的准备 1 安装虚拟机 vmware workstation 2 安装esxi 主机 3 在esxi 主机上安装windows 2018 dns 服务器 4 在虚拟机上安装windows 2018 服务器 6 安装vcenter 5 登入界面测试 这里讲一下&#xff0c;由于部署vspere 需要在windows 2012 服务器上部…...

QT 实现QStackedWidget切换页面右移动画

1.实现效果 以下是一个QStackedWidget,放了两个QPushButton在上面,点击切换不同的界面。 为了方便查看动画特效,设置了每个界面的背景图片。 2.实现思路 首先截取当前界面的图片,渲染到一个QLabel上,然后设置QPropertyAnimation动画,动画的作用对象就是这个QLabel,不断…...

Android Camera2采集并编码为H.264

前言 本篇博文主要讲述的是基于Android原生MediaCodec通过Camera2 API进行图像数据采集并编码为H.264的实现过程&#xff0c;如果对此感兴趣的不妨驻足观看&#xff0c;也欢迎大家大家对本文中描述不当或者不正确的地方进行指正。如果对于Camera2预览还不熟悉的可以观看博主上…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...