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

禁止浏览器记住密码和自动填充 element-ui+vue

news 2025/9/13 3:39:38

vue 根据element-ui 自定义密码输入框，防止浏览器 记住密码和自动填充

 <template><divclass="el-password el-input":class="[size ? 'el-input--' + size : '', { 'is-disabled': disabled }]"><inputclass="el-input__inner":placeholder="placeholder"ref="input":style="{ paddingRight: padding + 'px' }":disabled="disabled":readonly="readonly"@focus="handleFocus"@blur="handleBlur"@input="handleInput"@change="change"@compositionstart="handleCompositionStart"@compositionend="handleCompositionEnd"/><div class="tools"><iv-if="clearable !== false"v-show="pwd !== '' && isfocus"@mousedown.preventclass="el-input__icon el-icon-circle-close el-input__clear"@click="clearValue"></i><iv-if="showPassword !== false"v-show="pwd !== '' || isfocus"class="el-input__icon el-icon-view el-input__clear"@click="changePasswordShow"></i></div></div>
</template> <script>
import emitter from "element-ui/src/mixins/emitter";
//自定义密码输入框//input元素光标操作
class CursorPosition {constructor(_inputEl) {this._inputEl = _inputEl;}//获取光标的位置 前，后，以及中间字符get() {var rangeData = { text: "", start: 0, end: 0 };if (this._inputEl.setSelectionRange) {// W3Cthis._inputEl.focus();rangeData.start = this._inputEl.selectionStart;rangeData.end = this._inputEl.selectionEnd;rangeData.text =rangeData.start != rangeData.end? this._inputEl.value.substring(rangeData.start, rangeData.end): "";} else if (document.selection) {// IEthis._inputEl.focus();var i,oS = document.selection.createRange(),oR = document.body.createTextRange();oR.moveToElementText(this._inputEl);rangeData.text = oS.text;rangeData.bookmark = oS.getBookmark();for (i = 0;oR.compareEndPoints("StartToStart", oS) < 0 &&oS.moveStart("character", -1) !== 0;i++) {if (this._inputEl.value.charAt(i) == "\r") {i++;}}rangeData.start = i;rangeData.end = rangeData.text.length + rangeData.start;}return rangeData;}//写入光标的位置set(rangeData) {var oR;if (!rangeData) {console.warn("You must get cursor position first.");}this._inputEl.focus();if (this._inputEl.setSelectionRange) {//  W3Cthis._inputEl.setSelectionRange(rangeData.start, rangeData.end);} else if (this._inputEl.createTextRange) {// IEoR = this._inputEl.createTextRange();if (this._inputEl.value.length === rangeData.start) {oR.collapse(false);oR.select();} else {oR.moveToBookmark(rangeData.bookmark);oR.select();}}}
}
export default {name: "el-password",props: {value: { default: "" },size: { type: String, default: "" },placeholder: { type: String, default: "请输入" },disabled: { type: [Boolean, String], default: false },readonly: { type: [Boolean, String], default: false },clearable: { type: [Boolean, String], default: false },showPassword: { type: [Boolean, String], default: false },},data() {return {symbol: "●", //自定义的密码符号pwd: "", //密码明文数据padding: 15,show: false,isfocus: false,inputEl: null, //input元素isComposing: false, //输入框是否还在输入（记录输入框输入的是虚拟文本还是已确定文本）};},mounted() {this.inputEl = this.$refs.input;this.pwd = this.value;this.inputDataConversion(this.pwd);},mixins: [emitter],watch: {value: {handler: function (value) {if (this.inputEl) {this.pwd = value;this.inputDataConversion(this.pwd);}},},showPassword: {handler: function (value) {let padding = 15;if (value) {padding += 18;}if (this.clearable) {padding += 18;}this.padding = padding;},immediate: true,},clearable: {handler: function (value) {let padding = 15;if (value) {padding += 18;}if (this.showPassword) {padding += 18;}this.padding = padding;},immediate: true,},},methods: {select() {this.$refs.input.select();},focus() {this.$refs.input.focus();},blur() {this.$refs.input.blur();},handleFocus(event) {this.isfocus = true;this.$emit("focus", event);},handleBlur(event) {this.isfocus = false;this.$emit("blur", event);//校验表单this.dispatch("ElFormItem", "el.form.blur", [this.value]);},change(...args) {this.$emit("change", ...args);},clearValue() {this.pwd = "";this.inputEl.value = "";this.$emit("input", "");this.$emit("change", "");this.$emit("clear");this.$refs.input.focus();},changePasswordShow() {this.show = !this.show;this.inputDataConversion(this.pwd);this.$refs.input.focus();},inputDataConversion(value) {//输入框里的数据转换，将123转为●●●if (!value) {this.inputEl.value = "";return;}let data = "";for (let i = 0; i < value.length; i++) {data += this.symbol;}//使用元素的dataset属性来存储和访问自定义数据-*属性 (存储转换前数据)this.inputEl.dataset.value=  this.pwd;this.inputEl.value = this.show ? this.pwd : data;},pwdSetData(positionIndex, value) {//写入原始数据let _pwd = value.split(this.symbol).join("");if (_pwd) {let index = this.pwd.length - (value.length - positionIndex.end);this.pwd =this.pwd.slice(0, positionIndex.end - _pwd.length) +_pwd +this.pwd.slice(index);} else {this.pwd =this.pwd.slice(0, positionIndex.end) +this.pwd.slice(positionIndex.end + this.pwd.length - value.length);}},handleInput(e) {//输入值变化后执行 //撰写期间不应发出输入if (this.isComposing) return;let cursorPosition = new CursorPosition(this.inputEl);let positionIndex = cursorPosition.get();let value = e.target.value;//整个输入框的值if (this.show) {this.pwd = value;} else {this.pwdSetData(positionIndex, value);this.inputDataConversion(value);}cursorPosition.set(positionIndex, this.inputEl);this.$emit("input", this.pwd);},handleCompositionStart() {//表示正在写this.isComposing = true;},handleCompositionEnd(e) {if (this.isComposing) {this.isComposing = false;//handleCompositionEnd比handleInput后执行，避免isComposing还为true时handleInput无法执行正确逻辑this.handleInput(e);}},},
};
</script><style scoped>
.tools {position: absolute;right: 5px;display: flex;align-items: center;top: 0;height: 100%;z-index: 1;
}
</style>

引用组件

<template><div><el-formstyle="width: 320px; margin: 50px auto":model="fromData"ref="elfrom":rules="rules"><el-form-item label="密码" prop="password"><el-passwordsize="small"v-model="fromData.password"show-passwordplaceholder="请输入密码"></el-password></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-passwordsize="small"v-model="fromData.confirmPassword"show-passwordplaceholder="请再次输入密码"></el-password></el-form-item></el-form><br /></div>
</template>
<script>
import elPassword from "./el-password.vue";
export default {data() {return {fromData: {password: "",confirmPassword: "",},rules: {password: [{required: true,validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入密码"));} else if (/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[^a-zA-Z0-9]).{10,20}$/.test(value) === true) {callback();} else {callback(new Error("密码范围在10~20位之间！须包含字母数字特殊符号"));}},trigger: "blur",},],confirmPassword: [{required: true,validator: (rule, value, callback) => {if (!value) {callback(new Error("请输入确认密码"));} else if (value != this.fromData.password) {callback(new Error("二次密码不一致"));} else {callback();}},trigger: "blur",},],},};},components: {elPassword,},
};
</script>

效果图

在这里插入图片描述

http://www.lryc.cn/news/269187.html

相关文章：

  • K8s实战-init容器
  • Vue3.2 自定义指令详解与实战
  • XV-3510CB振动陀螺仪传感器
  • 设计模式Java向
  • 图片素材管理软件Eagle for mac提高素材整理维度
  • Transformer各模块结构详解（附图）
  • Python遥感影像深度学习指南(2)-在 PyTorch 中创建自定义数据集和加载器
  • 韩版传奇 2 源码分析与 Unity 重制（三）客户端渲染管线
  • 深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第三节 栈与堆，值类型与引用类型
  • 分享好用的chatgpt
  • 【小白专用】C# 压缩文件 ICSharpCode.SharpZipLib.dll效果：
  • Protobuf 编码规则及c++使用详解
  • Kafka优异的性能是如何实现的？
  • （二）MaterializedMySQL具体实施步骤举例
  • 日志框架简介-Slf4j+Logback入门实践 | 京东云技术团队
  • c 语言， 随机数，一个不像随机数的随机数
  • Git三种方法从远程仓库拉取指定分支
  • 7.6分割回文串（LC131-M）
  • stata回归结果输出中，R方和F值到底是用来干嘛的？
  • Windows搭建RTMP视频流服务（Nginx服务器版）
  • IP地址SSL证书
  • 关于“Python”的核心知识点整理大全49
  • 爬虫学习(1)--requests模块的使用
  • 【Vue2 + ElementUI】el-table中校验表单
  • PgSQL技术内幕 - ereport ERROR跳转机制
  • 【验证概括 SV的数据类型_2023.12.18】
  • 如何在无公网IP环境下远程访问Serv-U FTP服务器共享文件
  • 电子工程师如何接私活赚外快？
  • 数据库进阶教学——读写分离（Mycat1.6+Ubuntu22.04主+Win10从）
  • MidJourney笔记（9）-daily_theme-docs-describe