对于input autocomplete防止自动填入和获取焦点下拉记忆的问题处理 自动显示浏览器记住的密码bug修改

最新推荐文章于 2023-02-11 14:46:22 发布
最新推荐文章于 2023-02-11 14:46:22 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： autocomplete失效处理 浏览器 文章标签： autocomplete 密码框下拉记忆消除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41628411/article/details/82733178
版权

项目中拥有充值和提现页面，都会有密码输入框，但是登录所记住的密码 会在password属性的input中下拉显示 而且会自动填入，客户要求 不能自动填入和下拉显示记忆，
所以我就在百度中各种搜索，可是都没有太满意的 都是些各种autocomplete和获取焦点时修改type为password 什么的 试过之后只有第一次获取焦点时候好使，后面就并没有什么卵用 只好自己琢磨了
这个东西引起的原因根本是浏览器会让你类似于登录的input当成是登录框来处理 （只要你是type=text和type=password两个input同时存在就会把浏览器记住的密码下拉显示出来）
废话不多说 看代码这里写图片描述
这里写图片描述
也是采用动态修改type属性来进行处理 宗旨就是让type=text和type=password不同时存在于同一个页面当中就好
纯属个人见解 也确实处理了本人在项目当中所遇到的密码自动填入下拉显示记忆的问题

@曾经@
关注
专栏目录
浏览器表单自动填充问题【兼容性解决方案】
一只彩乌鸦
06-21 1633
stackoverflow: chrome-ignores-autocomplete-off更多参考该问题是关于Chrome浏览器自动填充的功能，Chrome团队对此给出了他们的立场-https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164简单来说，有两种情况——【案例1】：你的类型不是。在这种情况下，解决方案很简单，分为三个步骤。将属性添加到不应以电子邮箱或用户名之类的值开头，否则Chrome任然会显示下拉列表。例如，显示下拉菜单，
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
02-21 995
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
input 自动填入机制 autoComplete
萧萧的博客
05-11 2253
现在浏览器都有保存密码机制，对我们正常登陆是很方便，但是有的时候就会有问题，比如你的密码框上面并不是你的账号框、或者是当前网站由多个账号登录了并保存密码了，有的时候自动填入的并不是自己想要的，这个时候就显得这个机制有点体验不是很好得了，因此屏蔽这个功能换事很可以的。 网上有很多办法，可以归类为： 1:用autocomplete属性，（貌似没有任何作...
autocomplete="off"属性——解决input标签（文本框）出现缓存值的问题
程序羊的博客
09-26 5276
刚入学的程序员在编码的时候，应该都有试过单击input标签（文本框）出现缓存值的问题，针对这问题的解释是；多数浏览器默认都会缓存input标签的值，这对部分用户来说带来了不好的体验，所以，如果不想让浏览器缓存input标签的值，有2种解决方法： 方法一（推荐）： 在不想使用缓存的input标签中添加 autocomplete="off"属性; eg: <input type="text" n...
使HTML的文本框没有缓存下拉菜单
weixin_30823001的博客
03-27 92
<input type="text" name="test" autocomplete="off" /> 转载于:https://www.cnblogs.com/flysnow-z/archive/2009/03/27/1422965.html
表单 type="password" autocomplete="off" 失效问题 !!!!!!
qq_36948660的博客
09-06 2473
在input 表单中 type="password"时，在谷歌浏览器中，保存密码之后， 会出现使用一下项的密码  在代码中加入autocomplete="off"是没有效果的，差了很多资料，最后发现加入autocomplete="new-password"快速完美解决问题，浪费了很多时间，记录一下！  ...
input password 类型密码自动填充 问题解决
cainiaochen3的博客
03-08 5847
在登录不同平台经常习惯性记住密码 导致在开发过程中发现 自己开发的网站如果存在input 密码框 浏览器会自动填充密码到里面 解决方法参考163邮箱网站 直接简单 加入autocomplete="new-password" &lt;el-input placeholder="请输入密码" v-model="userDialogFormList.lockAuthorizedPwd" type="...
有关suggest快速删除后仍然出现下拉列表的bug问题
09-01
在开发Web应用时，我们经常使用自动补全（Autocomplete）功能来提升用户体验，其中`suggest`组件就是一种常见的实现方式。然而，在实际使用中，可能会遇到一个恼人的bug：用户快速删除输入框中的文字后，`suggest`的...
【关于Element UI中el-autocomplete组件】二、el-autocomplete组件解决@blur与@select事件冲突
XujiRe的博客
06-22 5715
Element UI中el-autocomplete组件遇到的坑，@blur事件与@select事件冲突，popper-class的使用技巧之popper-append-to-body导致
input密码框获取焦点，不出现账号密码下拉列表
qq_29090987的博客
02-21 1647
最近有一个项目表单中有密码框，但是在浏览器上获取input焦点后就会出现之前记住的账号密码信息，产品 要求不需要显示这个下拉框。 翻阅了大量的资料并没有好的解决方案； 比较详细的参考链接：https://blog.csdn.net/weixin_43043994/article/details/97890856 项目是基于vue2+elementui框架下开发的 以下提供个人觉得更好的思路与代码 大致思路： 当输入框有值时input设置为password类型，没有值或者清空值时重新渲染input框为tex
input解决浏览器记住密码问题
weixin_34414196的博客
03-31 447
<input type="password" name="" id="">可以这样写 <input type="text"onfocus="this.type='password'"name="" id=""> 转载于:https://www.cnblogs.com/nazi/p/4380701.html
element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码
MISS_zhang_0110的博客
09-13 3639
1.使用element中el-input自带的属性auto-complete（版本二可用）,但是值不能按照官网而要改成new-password。2.使用el-input组件的只读属性（是否）readonly，开始要input框为只读，readonly = “true”。3.注册聚焦事件focus，控制readonly的属性值（true，false）。
清除input框对浏览器保存的用户名和密码自动填充问题
weixin_30381793的博客
08-01 1062
清除input框对浏览器保存的用户名和密码自动填充问题： type类型写如下写法，聚焦的时候type类型为“password” <input ng-model="getpwd" name="password" 　　type="text" type="password" autocomplete="off" onfocus="this.type='password'" ...
阻止input弹出历史密码提示
weixin_51679573的博客
02-11 1049
阻止input弹出历史密码提示
解决坑爹的input框自动填充密码和密码历史记录
weixin_30273931的博客
07-29 2307
1.input框会自动填充密码 　 原因：浏览器会根据用户已经保存过的密码，在type为password的input中自动填充密码 目前的解决办法是设置一个隐藏的inpu让他填充 //隐藏 <input type="password" class="form-control" name="SecretOld" style="display:none" /> ...
关于设置了select控件内option的selected属性，却没有变化的解决方案。
weixin_43538901的博客
05-14 7363
问题描述：使用jQuery的attr函数设置select控件内option的selected属性，会偶发性设置不到位，比如通过jQuery的attr函数把option的selected属性改为true，通过console控制台也看到该option确实为true，但实际显示select还是原来的选中值，甚至还有偶发性的情况。 解决办法：这时使用jQuery的prop函数。 具体代码： <sel...
input输入框的自动记忆/填充功能禁用
热门推荐
iUserWang
09-05 1万+
我们在使用input时，经常会出现一个小问题，就是自动填充。 **如下图，**当我们选择日期时，应出现日期选择，然而在其上方出现了一列时间数据，既影响使用又不美观。 其实这是html5的一个新属性： autocomplete 属性规定输入字段是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 autoc...
vue防止浏览器自动填充以及记住密码
最新发布
04-05
如果想要防止浏览器记住密码，可以在表单提交时将密码字段的值清空。例如： ```javascript form.addEventListener('submit', function(event) { var passwordInput = document.getElementById('password'); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值