【前端学习】解决表单中自动填充密码问题

最新推荐文章于 2023-09-19 17:08:10 发布
最新推荐文章于 2023-09-19 17:08:10 发布
阅读量775 收藏
点赞数 1
分类专栏： 解决问题汇总 文章标签： javascript 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44796493/article/details/105119490
版权

表单中当input是password类型时，打开浏览器会自动填充浏览器存储的密码，在input中加入autocomplete="new-password"即可解决。

<input type="password" name="password" placeholder="请输入密码" autocomplete="new-password"/>
咕咕1999
关注
专栏目录
如何修改 chrome 记住密码后自动填充表单的黄色背景？
liuhao9999的博客
03-23 507
chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的in put表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： { background-color:rgb(250,255,189)!important; background-image:none!important; color:rgb(0,0,0)!important; } 对chrome默认定义的background-color，backg
form表单禁止浏览器自动填充密码
IT博客技术分享
07-12 1808
form表单禁止浏览器自动填充密码
防止浏览器自动填充表单
Dronwing fish
04-22 2310
当我们在登录页选择记住密码后，如果在之后的页面中还存在type和name相同的输入框，比如修改密码或者新建用户时，浏览器会自动填充表单，这并不是我们想要的效果。解决这个问题有以下几个办法： 在我们真正想要输入的input前创建一个不显示且type等于password与和真正密码输入框同样name的input 这样浏览器填充的密码就填充在了不显示的输入框内。 使用autocomplete="new...
解决password自动填充问题
等待，就是浪费青春，让代码改变世界
06-29 7967
    写了一个项目，在用户登录时，浏览器老是提示保存登录信息，下次再次访问就会自动登录，我有严重的强迫症，特讨厌这样的效果，于是就在思考，如何使得不让浏览器保存用户登录信息呢？网上说的一大堆：1、将表单设置为autocomplete="off"    此方法我尝试了，如果没有input[type='password']字段还是能够实现不填充的，但是有input[type='password']，...
为什么设置了 autocomplete，浏览器仍然会自动填充密码？
Scar的博客
08-19 1278
HTML autocomplete 属性可用于以文本或数字值作为输入的 <input> 元素 ， <textarea> 元素, <select> 元素, 和<form> 元素。 autocomplete 作用于文本提示而不是账号密码提示，如图： 账号密码提示： 除了让用户关闭浏览器设置，我们应该如何从代码层面隐藏密码提示框呢? 首先看看浏览器填充表单密码的机制（各浏览器机制有些许不同），以 Chrome 为例，机制如下： 此域名下保存过用户信息。 找.
html5 input password,【前端技术】完美解决 element-ui input=password 在浏览器会自动填充密码的问题...
weixin_33685133的博客
07-01 368
:type="((readonly && ruleForm.password) || ruleForm.password)?'password':'text'":readonly="readonly"auto-complete="confirm-password"v-model="ruleForm.password":placeholder="$t('bankcard_settin...
前端如何解决浏览器自动填充input输入框账号密码的问题
热门推荐
migexiaoliang的博客
04-14 1万+
问题描述 【登录】子用户登录页面自动填充位置错误，本来主账号的账号密码，等切换到子账号登录页的时候，自动填充到了子账号的位置。 解决方案 <input auto-complete="new-password" autocomplete="new-password" v-model="childUserName" placeholder="IAM用户名" @focus="clearErrorInfo('childUserName')
Vue+element 解决浏览器自动填充记住的账号密码问题
12-10
以上所述是小编给大家介绍的Vue+element 解决浏览器自动填充记住的账号密码问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！ 如果你...
表单自动填充问题解决
u013994400的博客
08-18 804
html form 表单 autocomplete
浏览器表单自动填充问题【兼容性解决方案】
一只彩乌鸦
06-21 1607
stackoverflow: chrome-ignores-autocomplete-off更多参考该问题是关于Chrome浏览器自动填充的功能，Chrome团队对此给出了他们的立场-https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164简单来说，有两种情况——【案例1】：你的类型不是。在这种情况下，解决方案很简单，分为三个步骤。将属性添加到不应以电子邮箱或用户名之类的值开头，否则Chrome任然会显示下拉列表。例如，显示下拉菜单，
前端解决浏览器会自动填充密码的行为
weixin_43240905的博客
09-20 4206
前端解决浏览器会自动填充密码的行为 以vue为例 第一步：在该页面所有的input框前添加如下代码(针对于谷歌) html: &lt;input type="password" name="oldPwdInput" placeholder="" maxlength="20" autocomplete="off" style="position: fixed;top:-1000px&quo
完美解决 element-ui input=password 在浏览器会自动填充已保存的账号密码的问题（自验证通过）
wuxiaoying888的博客
03-23 2897
转载：https://www.jianshu.com/p/5055fda5bfbb <el-form-item label="用户名" prop="user_name"> <el-input v-model="info.user_name" :disabled="updateFlag" auto-complete="off" name="person.user.user_name"></el-input> </el-form-item&g
解决使用input 框的自动填充和浏览器缓存密码问题
l5410的博客
11-29 2499
解决使用input 框的自动填充和浏览器缓存密码问题
vue自定义密码输入框解决浏览器自动填充密码的问题
woisking2的博客
08-10 2425
在尝试了上述几种解决方案后，发现效果都不是很好，所以我感觉只有让input的type属性始终为password，才能更有效的解决这个问题。可以考虑自定义一个密码输入框组件，通过某些方法去改变input的值的显示方式，来达到隐藏密码的效果。目前想出了两种方法：一个是不改变input的值，仅仅隐藏input的内容，用另一个容器去显示密码或者显示；另一个是将实际密码存在另一个变量中，将input的value值改成来显示。
Vue登录逻辑，解决由浏览器记住密码后，密码自动填充，下拉选项问题
bueryao527的博客
01-21 4401
前言： 作为前端开发，相信大家都遇到过这样的问题？绝大多数的pc项目都是需要登录，忘记密码的。功能很简单，但是有那么一些小小的问题。当我们将项目部署到服务上后，点击登录，浏览器会提示记住密码。作为用户，相信都是会记住的。但是问题来了，记住密码之后，密码会自动填充，鼠标点击密码框，还会出现下拉框让人选择，看着都没问题，但如果这个时候切换“忘记密码”，就会发现，忘记密码页面会自动填充之前浏览器记住的密码。网上有很多解决办法，但是并不能根本解决。再次，我总结了一下，分享给大家。
前端 input type=“password“ 实现禁止浏览器记住账号、密码的功能
qq_37672347的博客
01-27 4993
方法一 name=“zzzz” 保持一致， 多写几个input 隐藏 ， autocomplete=“off” <el-input v-show="false" name="zzzz" type="text" /> <el-input v-show="false" name="zzzz" type="password" /> <el-input :key="passwordType" ref="password" v-model="loginForm.p
前端md5加密_post登陆分析实例，网站自定义password加密方式的分析
weixin_39997253的博客
12-27 329
前端加密主流的有这么几种方式：RSA、MD5、自定义加密函数，其中自定义加密函数的可变性更加强，在实际分析中也更加有难度。今天分析一个自定义加密的网站来说明这一点，网站是空中网，首先填个假信息抓个包看看。表单数据j:j(empty)type:1service:https://passport.kongzhong.com/username:18328491111password:368c041f87...
web前端学习笔记（登录界面）
BaldIsImpossible的博客
11-03 1024
web前端学习笔记（登录界面）vue背景图有间隙怎么去除修改输入框的提示字样式改变鼠标图标关于position的absolute和fixed实现密码框小眼睛功能设置中间分隔线调节边框 vue背景图有间隙怎么去除 把body的外边距设置为0。注意，要设置在最底层的组件里！通常是App.vue body{ margin: 0px; } 修改输入框的提示字样式 谷歌浏览器 ::-webkit-input-placeholder { color:snow; }/*Webkit browsers 谷歌，
前端解决使用input框的自动填充和浏览器缓存密码问题
朱远辉的博客
09-19 2725
前端解决使用input 框的自动填充和浏览器缓存密码问题
el-input type=password 时密码自动填充问题 关闭自动填充
最新发布
09-30
当使用`el-input`组件在HTML5表单中设置类型为`password`时，浏览器会提供一种功能，即输入历史记录的自动填充，这可能会显示用户之前在其他网站上使用的密码。为了关闭这种自动填充，你可以采取以下几种策略： 1. **禁用浏览器自动填充**：在HTML中添加`autocomplete="off"`属性到`<input>`元素上，如： ```html <el-input type="password" autocomplete="off"> ``` 2. **使用`pattern`属性**：虽然不能直接阻止自动填充，但可以利用`pattern`属性指定输入验证规则，让浏览器认为这不是一个常规密码字段，例如： ```html <el-input type="password" pattern="[A-Za-z0-9]*"> ``` 3. **JavaScript解决方案**：如果你希望在前端进一步控制，可以监听`focus`和`input`事件，并清空输入框内容： ```javascript document.querySelector('el-input[type="password"]').addEventListener('focus', function() { this.value = ''; }); ``` 记住，上述方法不能完全阻止所有浏览器的所有自动填充行为，因为这是浏览器的安全特性。但在大多数情况下，它们能显著减少密码的泄露风险。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值