解决password自动填充问题

写了一个项目，在用户登录时，浏览器老是提示保存登录信息，下次再次访问就会自动登录，我有严重的强迫症，特讨厌这样的效果，于是就在思考，如何使得不让浏览器保存用户登录信息呢？

网上说的一大堆：

1、将表单设置为autocomplete="off"

此方法我尝试了，如果没有input[type='password']字段还是能够实现不填充的，但是有input[type='password']，此方法就无能为力了，所以我尝试不仅吧表单设置为autocomplete="off"，还把每一项表单内容都设置为autocomplete="off"，但是很遗憾，很失落，还是没有任何的效果，此方法pass掉

2、将input[type='text']和input[type='password']中间增加一下隐藏的input[type='text']，忽悠浏览器，浏览器有那么傻瓜吗？经测试此办法也是胡说八道！

3、将input[type='text']添加一个onfous时间，当触发onfocus时，将input[type='text']修改为input[type='password']，起初貌似可以，但是多点两下，就和最初没啥区别了，纯属误人子弟！

4、经过我一晚上的努力，终于找到了解决办法：

1）把方法1和方法3加上，加上浏览器忽略就算了，万一起作用呢？

2）最重要的是这一步：将<input type="submit"/>修改为<button type="button" id="login">登录</button>

点击button时，验证数据的合法性，如果合法通过ajax发起请求访问服务器验证，验证通过跳转即可。

附录代码实现：

<form method="post" id="form_login" autocomplete="off"><input type="password" class="hidden" /><input type="text" class="hidden" /><div class="lock-holder"><div class="form-group pull-left input-username"><label>账号</label><input name="user_name" id="user_name" autocomplete="off" type="text" class="input-text" value="" required /></div><i class="fa fa-ellipsis-h dot-left"></i> <i class="fa fa-ellipsis-h dot-right"></i><div class="form-group pull-right input-password-box"><label>密码</label><input name="password" id="password" autocomplete="off" type="text"  οnfοcus="this.type='password'"/></div></div><div class="submit"> <span><button class="input-button" id="login" type="button">登录</button></span> </div>
</form>

js验证并登录：

$("#login").click(function(event){event.preventDefault();if( $('#form_login').valid()){//首先校验账号和密码是否为空var user_name = $("#user_name").val();var password = $("#password").val();var data = {'user_name':user_name,'password':password,'captcha':captcha};//其次校验验证码$.ajax({type:'post',url:"{:url('Login/loginCheck')}",data:data,dataType:'json',async:false,success:function(data){if(data.result === 'true'){window.location.href="{:url('Index/index')}"; }else{$("#user_name").val('');$("#password").val('');}}});}return false;});

最终效果：

09网络欢迎您，想知道09网络是干啥的吗？不妨进来看看进来瞧瞧吧！！ 09网络

解决password自动填充问题相关推荐

解决输入框自动填充账号密码的问题
解决输入框自动填充账号密码的问题参考文章: (1)解决输入框自动填充账号密码的问题 (2)https://www.cnblogs.com/yzyh/p/11584500.html (3)https: ...
layui 解决浏览器自动填充form表单账号和密码输入框的问题
layui 解决浏览器自动填充form表单账号和密码输入框的问题参考文章: (1)layui 解决浏览器自动填充form表单账号和密码输入框的问题 (2)https://www.cnblogs.co ...
Vue+element 解决浏览器自动填充记住的账号密码问题
Vue+element 解决浏览器自动填充记住的账号密码问题参考文章: (1)Vue+element 解决浏览器自动填充记住的账号密码问题 (2)https://www.cnblogs.com/ju ...
解决浏览器自动填充账号密码行为
这东西真的不是程序员的问题,但是没办法拿着别人的给的钱就必须解决. 如果你很急,就直接跳到最后一个看解决办法. 首先为什么会出现这种情况本人实验了三个浏览器360浏览器.火狐浏览器.谷歌浏览器(都是 ...
前端如何解决浏览器自动填充input输入框账号密码的问题
问题描述 [登录]子用户登录页面自动填充位置错误,本来主账号的账号密码,等切换到子账号登录页的时候,自动填充到了子账号的位置. 解决方案 <inputauto-complete="ne ...
selenium如何解决IE自动填充表单问题
有时候用selenium会碰到自动填充表单的问题,如输入用户名后,密码自动填充,此时再填充密码会导致登录失败,解决办法:每个输入框都调用clear()方法
解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题
项目中管理系统使用chrome的首页登录界面会自动填充灰色背景.其填充样式为: 填充界面如下: 在网上查询了许多资料.这里我总结下比较好用的两个方法: 1.使用box-shadow将填充的背景覆盖(适 ...
完美解决谷歌浏览器自动填充问题
在谷歌浏览器中,登陆成功后,谷歌浏览器会提示是否记住密码.如果选择记住密码,那么再次登录会出现诸如下边情况: 如果产品需求是不希望浏览器自动填充账号密码,那么怎么去除呢? 最先想到的是设置input标 ...
vue解决输入框自动填充问题
//文本输入框 <el-inputv-model.trim="phone"autocomplete="off"placeholder="请输入手 ...

解决password自动填充问题

解决password自动填充问题相关推荐

最新文章

热门文章