el-input,input 输入框自动填充密码解决(autocomplete属性不生效)

原创 已于 2024-11-25 16:25:48 修改 · 705 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #elementui

于 2024-11-25 16:25:06 首次发布

el-input,input 输入框自动填充密码解决(autocomplete属性不生效)：

autocomplete设置无效情况使用下面的解决方式：
<el-input :readonly=“readonly” type=“password” v-model=“from.password” @click=“readonly=false”/>

秦天佟
关注
Debug-033-input输入框的浏览器默认填充密码的行为（未解决）
LM0916的博客
11-25 819
一般来讲不会超过三个，我看阿里云的设置密码就想到这个问题了，我没有别人的号，所以不会被记录到，而我们这里使用的是测试账号，记录过很多同事的账号，所以积累的比较多，其实只要用户一旦输入一个值之后，浏览器的填充就会消失了，没太大影响。想讨论的是如图二所示的问题：浏览器默认填充密码的行为。上面两个截图是MDN给出的解释，比较客观的表达了，确实不一定生效，有浏览器版本因素和不同浏览器的兼容因素。这里首先就给大家排出掉网上的一些很奇怪的“偏门方法”，我仔细想了一下，得不偿失，而且很多都是错的，完全没用。
关于elementui的input的autocomplete的使用
qq_36877078的博客
08-14 2276
关于elementui的input的autocomplete的使用
el-input 标签中密码的显示和隐藏功能的实例代码
10-16
本文通过实例代码给大家介绍了el-input 标签中密码的显示和隐藏 ,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效
a1783118的博客
11-24 7196
element中 el-input 中的 autocomplete 属性怎么使用，为什么不生效
el-input自动填充浏览器缓存数据 使用autocomplete=“off“不生效
qq_34629527的博客
04-08 986
el-input自动填充浏览器缓存数据
el-input auto-complete=“off“不生效
陈庄主的博客
07-28 1679
当用在浏览器打开了上述设置时，edge页面的每个input框都会自动打开填充信息，需要从代码层面取消自动填充设置属性；auto-complete="off"有时不生效，设置auto-complete="new-password"即可。
【vue解决el-input组件自动填充用户名密码】
xiejunlan的博客
06-19 963
解决el-input组件自动填充用户名密码
<el-input type="password" auto-complete="new-password" autocomplete="new-password" ></el-input>这个方法还是不行，谷歌不生效
02-21
</think> `<el-input>` 的密码输入框在谷歌浏览器中自动填充（`autocomplete`）失效的问题，以下是详细分析和解决方案： --- ### **问题原因** 1. **属性拼写错误**：HTML 原生属性是 `autocomplete`，而非 `auto-...
el-input密码
09-03
- 如引用[1]所述，可以通过添加隐藏的`<el-input type="text">`字段并设置`autocomplete="username"`来防止密码管理器自动填充主密码字段。这是一种常见的变通方案，尤其在登录页面中使用较多。 - 替代方法：使用`...
Chrome禁止输入框弹出已经记录的密码方案，测试有效.txt
09-17
然而，传统的方法，如通过设置`autocomplete`属性为`off`来禁用自动填充密码的功能，在某些版本的Chrome浏览器上已经不再生效。本文将介绍一种经过测试验证仍然有效的方案，该方案适用于Chrome 84版本，可以有效地...
form表单禁止浏览器自动填充密码
IT博客技术分享
07-12 2676
form表单禁止浏览器自动填充密码
对input框设置autocomplete无论怎样设置都不起作用
好技术，多分享
02-22 4197
对input框设置autocomplete无论怎样设置都不起作用 chrome和firefox 中对input框设置autocomplete="new-password"不起作用。 autocomplete="off"也不起作用。 解决方案 可以给Input设置一个默认的readonly属性，然后用 οnfοcus=“this.removeAttribute(‘readonly’);” οnblu...
vue3 element-plus 组件el-autocomplete的clearable属性不生效的问题
weixin_48203270的博客
04-10 308
设置完了不生效，网上已经有了各种办法了，如果没有试过注册全局图标组件的试试我这个。的清除按钮图标是一个element-plus内置图标组件，要全局注册。如果没用，当我没说【狗头】在main.js添加。
在chrome浏览器下 input的autocomplete="off"失效，导致的自动填充
斌不厌咋
01-25 9096
之前客服就给我反应过input自动匹配的问题，根据网上的资源改了发现还是有有问题，今天是2016最后一天工作日，没有其他工作就来把之前这些没有彻底修改的问题拿出来look，look。 问题现象： 就是像这种只要你input focus就有这种自动匹配的弹出来，有时候这种挺方便但是很多地方真的不需要，按照网友的方法给input 添加autocomplete="off"的属性，不起作用，尤其是
input标签中autocomplete="off"失效的具体解决办法
younghard的博客
08-16 1万+
废话不说先来看问题 解决的思路： 根据网上的资料得知是因为密码输入框 input type=“password”造成的，所以我的解决思路是先把密码输入框的type="password"改成type="text",然后在获取焦点的时候把它改回来； 解决的具体方法： 1、type="password"改成type="text"； 2、给input标签添加自定义属性 我是这样处理的
input标签中autocomplete=“off“ 失效的解决办法
qq_43506852的博客
10-09 1462
https://blog.csdn.net/dhlctaqzyba39516/article/details/101904541
解决使用input 框的自动填充和浏览器缓存密码问题
l5410的博客
11-29 2734
解决使用input 框的自动填充和浏览器缓存密码问题
input标签中autocomplete="off" 失效的解决办法
dhlctaqzyba39516的博客
10-21 2167
在做用户注册的时候因为密码输入框 input type=“password”造成的，用户名密码总是自动填充，加上autocomplete="off"也无效，后面找到一种简单的解决方法，不多说看代码： 解决方法： 　　1、type="password"改成type="text" 　　2、给input标签添加自定义属性flag="password" <div clas...
input输入框禁止自动填充,autocomplete="off"和 autocomplete="new-password"失效
热门推荐
yuanting_的博客
05-24 1万+
1.在input 里面加上 autocomplete=“off” 属性 <label> <span>用户名:</span> <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"> </label> <label> ...
vue使用el-input组件怎么设置不自动填充账号密码
最新发布
09-18
在Vue中使用el-input组件设置不自动填充账号密码，可尝试以下方法： ### 1. 设置`autocomplete`属性 在`el-input`标签中添加`autocomplete="new-password"`属性。`autocomplete`属性用于控制表单元素的自动完成功能，将其设置为`new-password`可以告诉浏览器不要自动填充密码。示例代码如下： ```vue <template> <el-form> <el-form-item label="账号"> <el-input v-model="userData.accountNo" placeholder="请输入账号" autocomplete="off"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="userData.password" placeholder="请输入密码" show-password autocomplete="new-password"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { userData: { accountNo: '', password: '' } }; } }; </script> ``` ### 2. 使用动态绑定`autocomplete`属性 在某些情况下，可能需要根据特定条件动态设置`autocomplete`属性。可以使用Vue的动态绑定语法来实现。示例代码如下： ```vue <template> <el-form> <el-form-item label="账号"> <el-input v-model="userData.accountNo" placeholder="请输入账号" :autocomplete="shouldAutocomplete ? 'on' : 'off'"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="userData.password" placeholder="请输入密码" show-password :autocomplete="shouldAutocompletePassword ? 'current-password' : 'new-password'"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { userData: { accountNo: '', password: '' }, shouldAutocomplete: false, shouldAutocompletePassword: false }; } }; </script> ``` ### 3. 利用JavaScript控制 在组件的`mounted`钩子中，可以通过JavaScript代码来设置`autocomplete`属性。示例代码如下： ```vue <template> <el-form> <el-form-item label="账号"> <el-input ref="accountInput" v-model="userData.accountNo" placeholder="请输入账号"></el-input> </el-form-item> <el-form-item label="密码"> <el-input ref="passwordInput" v-model="userData.password" placeholder="请输入密码" show-password></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { userData: { accountNo: '', password: '' } }; }, mounted() { this.$refs.accountInput.$el.getElementsByTagName('input')[0].setAttribute('autocomplete', 'off'); this.$refs.passwordInput.$el.getElementsByTagName('input')[0].setAttribute('autocomplete', 'new-password'); } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值