取消自动填充密码

A work-around for -webkit-text-security property.

type="text", autocomplete="off"

<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;" autocomplete="off"

使用font-family: 'dotsfont';

@font-face {
  font-family: 'dotsfont';
  src: url('dotsfont.eot');
  src: url('dotsfont.eot?#iefix') format('embedded-opentype'),
       url('dotsfont.woff') format('woff'),
       url('dotsfont.ttf') format('truetype'),
       url('dotsfont.svg#dotsfontregular') format('svg');
}

[conceal]:not(:active):not(:focus) {
  font-family: 'dotsfont';
}
<span conceal>hide me</span>
### 如何在 Element UI 中禁用 el-input 组件的自动填充 为了防止 `el-input` 组件被浏览器自动填充,可以采取多种方法来实现这一目标。 #### 方法一:通过设置 autocomplete 属性 对于表单中的输入字段,可以通过设置 `autocomplete="off"` 来阻止浏览器尝试预填数据。此方式适用于标准 HTML 输入框以及基于这些标签构建的组件,如 Element Plus 的 `el-input`[^1]。 ```html <el-form> <el-form-item label="用户名"> <el-input v-model="username" autocomplete="off"></el-input> </el-form-item> </el-form> <script setup lang="ts"> import { ref } from 'vue'; const username = ref(''); </script> ``` #### 方法二:动态改变 input 类型 当页面加载完成后立即将密码域转换成其他类型的输入框(比如 text),然后再迅速转回 password,这样可以让某些版本的 Chrome 浏览器放弃自动填写行为[^2]。 ```javascript // 假设这是 Vue 实例内的 methods 或者 Composition API 下的方法 nextTick(() => { const pwdInput = document.querySelector('.pwd-field'); if (pwdInput) { pwdInput.setAttribute('type', 'text'); // 切换到文本模式 requestAnimationFrame(() => { pwdInput.setAttribute('type', 'password'); // 还原为密码模式 }); } }); ``` #### 方法三:使用虚拟字段隐藏真实输入 创建两个不可见的 `<input>` 字段放置于实际可见之前作为干扰项,使得浏览器误认为已经找到了匹配的登录凭证而不再继续寻找并填充后面的真正条目[^3]。 ```html <!-- 隐藏的假输入 --> <input style="display:none;" type="text" name="fakeusernameremembered"/> <input style="display:none;" type="password" name="fakepasswordremembered"/> <!-- 真实的用户界面 --> <el-form :model="formLabelAlign"> <!-- ...其余代码... --> </el-form> ``` 以上三种方案可以根据具体应用场景灵活选用或组合应用以达到最佳效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值