input标签在谷歌浏览器记住密码的自动填充问题

最新推荐文章于 2023-01-02 21:27:42 发布
最新推荐文章于 2023-01-02 21:27:42 发布
阅读量348 收藏
点赞数
文章标签： chrome html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s_unny_wang/article/details/121679263
版权 
<input type='password' readonly onfocus="this.removeAttribute('readonly');" />
王靓靓
关注
谷歌浏览器账号密码自动填充和明文显示问题
weixin_46103566的博客
11-25 2493
最近在项目中遇到谷歌会自动填充账号密码并且点击有明文提示的问题，查阅各方资料结合理解最终解决问题。现总结如下： 1.上图 很明显看到点击后有明文提示，在登录页面时我们或许需要登录提示。但是在其它页面出现这个情况明显是需要解决的。究其原因是input框中type为password造成的，那么我们便针对此做出input添加readonly属性以及事件监听复写。自动填充可通过auto-complete="new-password"解决 2.项目代码（vue+element） 自行引入jquery templa
通过h5代码写法取消chorme密码自动填充
youand_me的博客
01-26 9043
禁用谷歌浏览器的密码自动填充、通过h5代码写法来取消chorme密码自动填充
谷歌浏览器保存密码后，会对input 标签 自动填充
jieyigeweixiao的博客
09-27 854
Chrome 设置保存密码后，会自动填充到第一个和它之前的 在网上搜索 在 input加一个autocomplete=“off” 后，还是没作用 此属性是 HTML5 的新属性，自动完成允许浏览器预测对字段的输入，但是只只用于text, search, url, telephone, email, password, datepickers, range 以及 color类型的和 后来 又添加...
Chrome 浏览器input输入框值为空时会自动填充记录的账号密码
我是纯豆腐的博客
10-13 1652
偶尔遇到的BUG，算是浏览器的一个BUG，但是我们改不了浏览器啊，只能自己代码去处理了，这点感觉chrome有点恶心。 网页中的表单，chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性 就会变成： input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 1、纯色背景（添加内阴影） in..
关于谷歌登录输入框的自动填充处理
weixin_43561594的博客
06-29 1649
关于谷歌登录输入框的自动填充处理 ▍背景 关于谷歌浏览器自动填充账号密码输入框的问题想必方便了不少开发者，但同时也困扰了不少开发者。近期我也是遇到了一个需求调整，要求不自动填充密码框，此外账户名输入框在焦点的情况下要弹出谷歌浏览器保存的账户名和密码下拉框，细心的你可能会发现，自动填充和密码下拉框并不冲突，但是…情况还是比较复杂，那就开始填坑之旅吧。 ▍过程 1.autocomplete=“new-password” 这是一个大家可能会经常使用的方法，最开始我也是使用这个方法，效果是输入框不自动填充了，但是账
完美解决谷歌浏览器自动填充问题
01-21
在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况： 如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？ 最先想到的是设置input标签属性...
解决input自动填充的问题
moqiuqin的博客
07-01 5287
这个问题在谷歌浏览器中出现，最终解决。这个问题查了一些资料说是谷歌浏览器的一个bug，并且一直不解决，不知道其他浏览器有没有，没做测试。 出现自动填充大多是因为记住密码的问题而导致，网上的一些方法说这样设置就没没问题了。 用户名：<input type='text' autocomplete='off'> 密码：<input type='password' autocomple...
解决浏览器保存密码自动填充问题
weixin_43818482的博客
01-15 761
解决浏览器保存密码自动填充问题 问题描述 话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新建用户的操作，里面的输入框自动将我的用户名和密码默认填写进去了，然后触发了内置的校验规则 在我确认过在打开编辑框的时候已经输入框的数据重置之后...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6590
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
Google浏览器记住密码造成input输入框黄色背景解决办法
ansiblexxxxxxxxxxx
02-08 3222
google 浏览器记住密码黄色背景很令人讨厌，以前通过autocomplete= off等各种正统方法来去掉，但很遗憾的是现在这些方法都不管用了，目前得用一些奇技淫巧才能解决，网上说的通过设置内阴影的方法要慎用，如果input背景是黑色，则会造成文字显示异常，下面这种方法经测试，在各个浏览器表现良好，原理是通过transition颜色变换，此方法会引起光标颜色异常。可以使用caret-color...
谷歌浏览器给输入框input自动填充密码解决办法
qq_40431271的博客
01-15 1372
谷歌浏览器给输入框input自动填充密码解决办法 如下图所示 因为图上的input不是密码框所以我们可以找到登陆页面在登陆页面的密码框上添加属性 autocompleted=“off” <input type="text" name="userName" autocompleted="off" /> <input type="password" name="pass...
vue element 项目：谷歌浏览器自动填充input处理方案
猛男博客
05-25 5222
项目中经常性的遇到当表单 form 里面有这种input框`type=‘password’`的时候，浏览器会`自动填充`input，很明显，这也太丑了！！！
input标签在谷歌浏览器记住密码下的一个自动填充BUG
AmberWu
03-13 6118
之前CSDN的编译器有问题，所以 这里重新整理给大家。 bug已经在之前的文章里叙述得很清楚了，现在只整理下bug的解决方案。 例如我们有一个id为demoinput标签 ，我们暂且叫他”1号input” &lt;input type="text" class="demo" id="demo"&gt; 在“1号input”的上面加一个“2号input”，并给“2号input”加一个disp...
处理谷歌浏览器记住密码后 input默认填充值或者记忆列表功能
gaoqiang1112的博客
03-05 6992
百度许久 大家都推荐 这个地址的方法 https://blog.csdn.net/xw505501936/article/details/52129579 里面一共列举了5种方法 不过楼主依旧没有解决 还有 这2个方法 大家都可以试试 https://blog.csdn.net/qq_21794603/article/details/72817927 https://blog...
Chrome中禁止input表单自动填入账号密码
baidu_41604826的博客
07-23 2876
Chrome中禁止input表单自动填入账号密码 登录记住密码后，所有的type=“password”的input，都会被自动填充：如下图 解决：适当的时候改变type的类型 state={ pwd:'', type:'text', } changeInfo = (str,val) =>{ if(str==="pwd"){ this.setS...
登录页面谷歌浏览器记住密码而在其他页面的input中出现了记住的内容
长歌的博客
11-20 935
项目过程中，用谷歌浏览器记住了密码，然而在其他页面发现第一个input框里是浏览器记住的内容。然后百度了下，发现了很多的解决方式。目前我在用的就是再不需要记住内容的标签后面加一个隐藏的input。 <p> <input type="text" placeholder="请输入信息"/><input type="text" style="height: 0;opacity: 0"> </p> 其中后面的input必须设置隐藏，其中hidee
解决chrome浏览器记住密码功能对密码框的影响
weixin_45543192的博客
10-25 975
chrome浏览器记住密码功能对密码框的影响 autocomplete=“off” chrome不管用 一行代码解决问题 给input框添加 autocomplete="new-password" 详细见上一篇代码 ，超级好用 加代码后效果 参考163邮箱 ...
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、付费专栏及课程。

余额充值