怎么禁止自动填充浏览器记住的密码？

浏览器保存密码是根据input="password"来判断的，所有我们只要保证浏览器在dom结构中识别不到密码框即可。

方案一：
在提交前清空输入框密码，并修改密码框为文本框。
（1）我的提交为发生Ajax提交，可根据自己实际情况进行调整
（2）表单方式，清空密码之后，将值保存在一个隐藏域中，再提交表单

  <td align="left"><lable style="font-weight: bold; color: #4175a4;">密&nbsp;&nbsp;&nbsp;码：</lable></td>
<td><input id="hiddenInput" type="text" style="display: none"><input  type="password"  style="width: 250px" class="form-control" id="password" name="password"  placeholder="请输入密码" autocomplete="false" required></td>$("#loginbtn").click(function() {var username= $("#username").val();var password= $("#password").val();$("#hiddenInput").val(password);$("#password").val("");if(username == null || username == ""){toastr.info("请输入用户名", "提示信息");return;}if(username == null || username == ""){toastr.info("请输入密码", "提示信息");return;}console.log(document.getElementById('hiddenInput').value);$.ajax({type: "POST",url: '/public/login',contentType: 'application/json',async: false,data: JSON.stringify({"username": username, "password":   $("#hiddenInput").val()}),dataType: "json",success: function (data) {if (data.status == 200) {window.location.href = "/public/index"} else {$("#hiddenInput").val();$("#password").val("******");toastr.error(data.message, "错误信息");}},error: function (data) {$("#hiddenInput").val();$("#password").val("******");toastr.error("连接服务器失败", "错误信息");}});})

方案二：（推荐使用，可防止浏览器上手动强制保存账号密码）
搞一个文本输入框，一个隐藏域，在密码框失去鼠标焦点的时候，将文本框的值保存到隐藏域中，并将文本框的值替换为同等长度的* 号

浏览器强制保存

  <td align="left"><lable style="font-weight: bold; color: #4175a4;">密&nbsp;&nbsp;&nbsp;码：</lable></td>
<td><input id="hiddenInput" type="text" style="display: none">
<input  type="password" oninput="myinput(this)" style="width: 250px" class="form-control" id="password" name="password"  placeholder="请输入密码" autocomplete="false" required></td>let trueValue = [];//保存真实数据的数组let beforeLength = 0;//隐藏框value的长度function myinput(self) {let nowLength = self.value.length;// 变化后的长度if(nowLength > beforeLength){//长度增加时trueValue.push(self.value[nowLength-1]);++beforeLength;}else{//长度减少时trueValue.pop();--beforeLength;}document.getElementById('hiddenInput').value = trueValue.join('');//数组转化为字符串，并填充入隐藏框let nowValue = '';//转换为圆点for(let i = 0; i < nowLength; ++i){nowValue += '•';}self.value = nowValue;}$("#loginbtn").click(function() {var username= $("#username").val();var password= $("#hiddenInput").val();if(username == null || username == ""){toastr.info("请输入用户名", "提示信息");return;}if(username == null || username == ""){toastr.info("请输入密码", "提示信息");return;}console.log(document.getElementById('hiddenInput').value);$.ajax({type: "POST",url: '/public/login',contentType: 'application/json',async: false,data: JSON.stringify({"username": username, "password": password}),dataType: "json",success: function (data) {if (data.status == 200) {window.location.href = "/public/index"} else {$("#hiddenInput").val();toastr.error(data.message, "错误信息");}},error: function (data) {$("#hiddenInput").val();toastr.error("连接服务器失败", "错误信息");}});})

方案三：
搞两个密码框，一个默认设置值为******,默认隐藏，另一个输入完提交的时候获取值后remove 掉，
并把之前隐藏的显示出来，失败情况下，重新构建该输入框

  <td align="left"><lable style="font-weight: bold; color: #4175a4;">密&nbsp;&nbsp;&nbsp;码：</lable></td><td id="pw-td">
<input type="password" style="width: 250px;display: none" class="form-control" value="*******" id="pd" name="pd" placeholder="请输入密码" autocomplete="false" required>
<input type="password" style="width: 250px" class="form-control" id="ipd" name="ipd" placeholder="请输入密码" autocomplete="false" required>
</td>$("#loginbtn").click(function() {var username= $("#username").val();var password= $("#ipd").val();if(username == null || username == ""){toastr.info("请输入用户名", "提示信息");return;}if(username == null || username == ""){toastr.info("请输入密码", "提示信息");return;}$("#ipd").remove();$("#pd").show();$.ajax({type: "POST",url: '/public/login',contentType: 'application/json',async: false,data: JSON.stringify({"username": username, "password": password}),dataType: "json",success: function (data) {if (data.status == 200) {window.location.href = "/public/index"} else {$("#pw-td").append("<input type=\"password\" style=\"width: 250px\" class=\"form-control\" id=\"ipd\" name=\"ipd\" placeholder=\"请输入密码\" autocomplete=\"false\" required>");$("#pd").hide();toastr.error(data.message, "错误信息");}},error: function (data) {$("#pd").hide();$("#pw-td").append("<input type=\"password\" style=\"width: 250px\" class=\"form-control\" id=\"ipd\" name=\"ipd\" placeholder=\"请输入密码\" autocomplete=\"false\" required>");toastr.error("连接服务器失败", "错误信息");}});})

怎么禁止自动填充浏览器记住的密码？相关推荐

html 弃用浏览器记住密码,html页面禁止自动填充浏览器记住的密码
现在的浏览器功能越来越强大,比如Chrome浏览器,在一个系统login的时候我们一般会记住密码,那么在整个系统中,浏览器一旦遇到 type="password"的控件,就会把密码 ...
前端如何解决浏览器自动填充input输入框账号密码的问题
问题描述 [登录]子用户登录页面自动填充位置错误,本来主账号的账号密码,等切换到子账号登录页的时候,自动填充到了子账号的位置. 解决方案 <inputauto-complete="ne ...
你还在这样做：浏览器“记住用户名密码”？
原文地址: 你还在这样做:浏览器"记住用户名密码"?-今日头条 https://open.toutiao.com/a6453394892038078989/?readmore_c ...
input禁止自动填充
1.在form表单或者input中使用autocomplete="off" 2.不让页面读取缓存数据 <meta http-equiv= "Pragma&quo ...
找回浏览器记住的密码
前言平时我们可能有习惯让浏览器记住我们的密码,这导致我们长时间不输入就会忘记我们的密码是多少.有时候我们就选择重新找回密码,但是今天要告诉大家,这里有一个小办法能让大家找到你的浏览器记住的密码详细 ...
360 html禁止自动填充,360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决？...
360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决? 很多用户都遇到了360浏览器自动填充表单的问题,那么怎么解决呢?今天带来360浏览器自动填充表单的问题解决方法分享. 开发 ...
计算机怎样记住用户名和密码,电脑浏览器怎么记住登录密码电脑浏览器记住登录密码方法【详解】...
浏览器,这是大家现在很熟悉也经常需要使用到的电脑工具.网上冲浪绝对少不了浏览器的配合,现在随着各种浏览器技术的进步,浏览器的功能也变得日趋的强大. 现在最给力的功能应该说是浏览器的自动记住密码的功能了 ...
浏览器记住用户名密码的解决办法
在做登陆注册模块时,发现一个浏览器的大bug,在在注册页面时,浏览器会自动填充用户名,密码,刚刚要注册的用户,怎么可以直接有默认的用户名密码呢!这是浏览器的记住密码功能,本来是方便登陆的,但是一些浏览 ...
360 html禁止自动填充,360极速浏览器如何停用“自动填充”功能
360极速浏览器管理停用"自动填充"功能的方法如下: 1.使用"自动填充选项"对话框添加.编辑或删除已创建的"自动填充"条目. 2.点击地址 ...

怎么禁止自动填充浏览器记住的密码？

怎么禁止自动填充浏览器记住的密码？相关推荐

最新文章

热门文章