input会默认带出浏览器保存的密码

最新推荐文章于 2022-10-08 10:06:09 发布
最新推荐文章于 2022-10-08 10:06:09 发布
阅读量915 收藏
点赞数
分类专栏： 前台问题 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qxy15997826736/article/details/113244614
版权

项目场景：

 新增数据源

问题描述：

新增时会默认带出浏览器密码

<tr>
						<td class="text-right" nowrap="nowrap" style="padding-bottom:8px;padding-top:8px;">
							<span class="required">*</span>用户名：
						</td>
						<td class="padding_r_40">
							<input id="userName"  type="text" class="form-control"/>
						</td>
					</tr>
					<tr>
						<td class="text-right" nowrap="nowrap" style="padding-bottom:8px;padding-top:8px;">
							<span class="required">*</span>密码：
						</td>
						<td class="padding_r_40">
							<input id="passWord" type="password" class="form-control"/>
						</td>
					</tr>

解决方案：

提示：

<tr>
						<td class="text-right" nowrap="nowrap" style="padding-bottom:8px;padding-top:8px;">
							<span class="required">*</span>用户名：
						</td>
						<td class="padding_r_40">
							<input id="userName"  type="text" class="form-control" autocomplete="new-password"/>
						</td>
					</tr>
					<tr>
						<td class="text-right" nowrap="nowrap" style="padding-bottom:8px;padding-top:8px;">
							<span class="required">*</span>密码：
						</td>
						<td class="padding_r_40">
							<input id="passWord" type="password" class="form-control" autocomplete="new-password"/>
						</td>
					</tr>

本来使用了autocomplete=“off”,但是不生效，在网上查找了一些方法autocomplete="new-password"生效

MicaQian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
input 关闭自动记忆功能 关闭浏览器自动填充输入框
gr_guhun的博客
01-12 2617
现象：input 输入框会记忆历史输入内容 原因：input 的autocomplete属性默认是on on：其含义代表是否让浏览器自动记录之前输入的值 off：则关闭记录 解决办法：将autocomplete属性修改为：off即可 单个input修改 <input type="text" autocomplete="off"> 批量修改 //消除自动记忆功能 关闭浏览器自动填充输入框 $('.form-control').attr("autocomplete","off")
input输入框自动补全与联想 (jq autocomplete)
qq_39199837的博客
08-22 2973
1 下载 jq autocomplete 链接: link. 2 如何使用 //输入框联想 $('#query').autocomplete({ serviceUrl: "ajax接口地址", type:'POST', deferRequestBy:500 }); 接口返回的json数据格式为： { "query": "word", //要查询的值 "suggestions": ["valu...
input输入框禁止显示浏览器记录
sunqy1995的博客
08-22 6711
在输入input时会出现显示原来输入的内容的情况，这是由于浏览器将先前的历史进行了记录，在input中进行了历史记录的显示，如： 解决办法： 在input中添加属性 autocomplete="off". 定义和用法： autocomplete 属性是HTML5的新属性 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 注释...
解决input 中text="password"时，浏览器会记住之前的用户名和密码问题
weixin_40626699的博客
12-19 5898
原代码： &lt;label for="username" class="sub-title"&gt;用户名：&lt;/label&gt; &lt;input type="text" id="username" class="sub-input" placeholder="123" autocomplete="off"&
html 记住密码提示框,前端禁止浏览器自动保存密码弹框
weixin_34188576的博客
06-07 2746
前端开发用的什么软件应聘前端开发需要做什么前端开发的部门是什么意思问题描述：浏览器会提供自动保存密码功能，我刚刚输入了用户名和密码，单击了浏览器提供的保存密码。而当我访问另外一个页面的时候，因为存在一个type=password的input，在谷歌浏览器中，却在这里把我刚刚保存的用户名和密码显示出来了，这是问题之一。问题之二，我这里是一个要输入信用卡CVV Code的区域，因为是CVV Cod...
解决浏览器会自动填充密码的问题
12-11
首先从登录弹框中登陆成功，chrome会弹出是否保存密码的提示框，点击保存密码按钮， 然后接着退出账户， 这时打开注册弹框，你会发现注册弹框中用户名和密码也被默认填写进去了（登录弹框中默认填写进去符合逻辑）...
如何实现修改密码时密码框显示保存到cookie的密码
09-04
在描述中指出，通过在`<input>`标签中添加`AUTOCOMPLETE="OFF"`属性，可以防止密码在密码框中被自动填充，这主要针对的是从cookie或者其他浏览器存储中保存的旧密码。 首先，我们需要理解`autocomplete`属性。这是...
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
09-03
在使用Chrome浏览器时，用户可能会遇到一个问题，即在表单输入时，浏览器会自动填充之前保存的用户名和密码，同时还会附带一些默认的样式，这可能与网站自身的设计风格不符。本文将介绍如何去除Chrome浏览器自动填充...
登录不弹框提示保存密码.不自动填充.文本框不拉选择
12-03
本示例针对的问题主要集中在三个方面：不弹出保存密码提示、不自动填充已保存的用户名和密码，以及禁止用户名输入框的下拉历史选择。这些都是针对Chrome浏览器的设置，因为Chrome在默认情况下会提供这些便利功能，但...
jQuery Cookie 用户名 密码保存到 cookie中
04-21
本文将深入探讨如何使用jQuery和一个名为`jquery.cookie.js`的插件来实现用户登录状态的持久化，即保存用户名和密码到浏览器的Cookie中。 首先，我们需要了解Cookie的基本概念。Cookie是由服务器端发送到客户端...
【el-input | el-select 调用浏览器默认的用户名密码如何处理】
JAVA5G的专栏
12-20 1256
项目场景： 例如：项目中很多情况 用到el-inputel-select单有时间 他会调取浏览器默认保存的用户名密码出来就很不爽，网上找了很多方法没一个靠谱的 ，反正我试了都不行都不能完美解决这个问题。 如图： 问题描我们通常写法如下： 提示：这里以el-select为实例input同理 <template> <el-select v-model="value" multiple filterable remote ...
关于password导致input弹出浏览器记住密码弹框问题
wu_bai的博客
10-08 1659
当有input有password的输入框在的时候，其他input输入框可能会在获取光标的时候会弹出浏览器的记住的密码弹框；
解决Chrome(谷歌浏览器) input框总是有输入记录的问题，尤其是日期框，输入记录都挡住日期弹框了。
qq_42237698的博客
04-12 8730
1、使用快捷键Ctrl+Shift+Del进入清除浏览器数据界面，然后勾选自动填充表单数据选项，便可解决。
PC端浏览器自动填充账号密码输入框问题该如何解决？
qq_40868156的博客
06-27 3626
解决浏览器自动填充账号密码输入框问题
input解决浏览器记住密码问题
weixin_34414196的博客
03-31 436
<input type="password" name="" id="">可以这样写 <input type="text"onfocus="this.type='password'"name="" id=""> 转载于:https://www.cnblogs.com/nazi/p/4380701.html
浏览器记住密码解决办法(密码回写到input框，点击出现密码下拉列表)
新前端小白的博客
07-31 1万+
最近项目中发现一个问题，谷歌浏览器记住密码后，遇到用户名和密码框会自动写入，点击会出现密码的列表，这样就很不安全，测试说如果你去上厕所，别人拿你的电脑，不用输原密码就可以改掉密码。。。。。。不敢苟同。第一想法是不记住密码就行啦，记住密码怎样都不安全，但是有了需求还得想办法解决。 一、加一个隐藏的input框 chrome填充密码的原理是寻找name相同的password框进行填充 所以在不需要记住...
处理谷歌浏览器记住密码后 input默认填充值或者记忆列表功能
gaoqiang1112的博客
03-05 6971
百度许久 大家都推荐 这个地址的方法 https://blog.csdn.net/xw505501936/article/details/52129579 里面一共列举了5种方法 不过楼主依旧没有解决 还有 这2个方法 大家都可以试试 https://blog.csdn.net/qq_21794603/article/details/72817927 https://blog...
如何真正解决浏览器给输入框input自动填充密码
iUserWang
09-10 8550
我们在使用浏览器的过程中，经常会保存一些账户和密码。如下图所示，可以在自动填充中查看： 这个方式为我们大大减轻了需要记忆多个用户名和密码的负担。 但对于开发人员来说，也带来了些小困扰。 一、问题 input的type是text等类型时，一切正常。 而当你将你的input的type改成password的时候，问题就出现了。 <input type="password" class="for...
关于input自带的自动补全的功能——autocomplete
热门推荐
weixin_37575140的博客
01-10 1万+
纪念一下，这是我的第一篇在C站上的博客~撒花~ autocomplete 属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。 注释：autocomplete 属性适用于 ，以及下面的 类型：text, search, ur
代码实现以下功能：实现注册登录功能 要求 1、默认显示登录，点击“去注册”打开注册dom结构 2、点击“去登录”打开登录dom结构 3、登录校验：（非空校验） 4、注册校验：（非空校验、密码和确认密码需保持一致、密码长度为6-15字符） 5、点击注册，发起注册接口请求 6、点击登录，发起登录接口请求 7、登录接口成功，将返回的token字段，保存到浏览器缓存，并跳转到首页页面 8、登录失败，不能跳转到首页，并弹窗提示“登录失败请重试”。
最新发布
04-21
非常感谢您的问题！下面是代码实现以上要求的示例： HTML代码： ``` <div id="login-register-box"> <div id="login-box" class="active"> <h3>登录</h3> <form> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> </div> <button type="submit">登录</button> <p>还没有账号？点击 <a href="#" id="go-register">去注册</a></p> </form> </div> <div id="register-box"> <h3>注册</h3> <form> <div> <label for="new-username">用户名：</label> <input type="text" id="new-username" name="new-username" required> </div> <div> <label for="new-password">密码：</label> <input type="password" id="new-password" name="new-password" required> </div> <div> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm-password" required> </div> <button type="submit">注册</button> <p>已有账号？点击 <a href="#" id="go-login">去登录</a></p> </form> </div> </div> ``` JavaScript代码： ``` // 获取DOM元素 const loginBox = document.getElementById('login-box'); const registerBox = document.getElementById('register-box'); const goRegister = document.getElementById('go-register'); const goLogin = document.getElementById('go-login'); // 切换登录注册 goRegister.addEventListener('click', function(e) { e.preventDefault(); loginBox.classList.remove('active'); registerBox.classList.add('active'); }); goLogin.addEventListener('click', function(e) { e.preventDefault(); registerBox.classList.remove('active'); loginBox.classList.add('active'); }); // 表单提交 const loginForm = loginBox.querySelector('form'); const registerForm = registerBox.querySelector('form'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); const username = loginForm.elements.username.value; const password = loginForm.elements.password.value; // 校验非空 if (!username || !password) { alert('用户名和密码不能为空！'); return; } // 发起登录请求 // ... // 模拟请求成功，保存 token 并跳转到首页 localStorage.setItem('token', 'abcdefg'); window.location.href = 'index.html'; }); registerForm.addEventListener('submit', function(e) { e.preventDefault(); const username = registerForm.elements['new-username'].value; const password = registerForm.elements['new-password'].value; const confirmPassword = registerForm.elements['confirm-password'].value; // 校验非空 if (!username || !password || !confirmPassword) { alert('请输入完整信息！'); return; } // 校验密码长度和一致性 if (password.length < 6 || password.length > 15) { alert('密码长度应为6-15个字符！'); return; } if (password !== confirmPassword) { alert('两次输入的密码不一致！'); return; } // 发起注册请求 // ... alert('注册成功！'); // 切换到登录页面 registerBox.classList.remove('active'); loginBox.classList.add('active'); }); ``` 这段代码实现了注册登录功能，通过HTML和CSS实现登录注册界面，通过JavaScript实现表单提交和校验。其中用到了localStorage来保存登录后的token，并且添加了切换登录注册的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值