解决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" onfocus="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网络
推荐阅读
-
完美解决spring websocket自动断开连接再创建引发的问题
-
WINXP系统关机自动重启问题解决办法
-
Android解决Spinner初始化时自动选择第一个 item 及点击已选中的 item 时不触发Listener问题
-
解决vue js IOS H5focus无法自动弹出键盘的问题
-
sql自动增长标识导致导入数据问题的解决方法
-
解决Python中定时任务线程无法自动退出的问题
-
MYSQL ERROR 1045 (28000): Access denied for user (using password: YES)问题的解决
-
自动清理 MSSQL Server Table Collation问题的解决方法
-
Nginx反斜杠自动解码问题解决方法
-
EXCEL使用宏实现自动编号打印解决打印一份改一次编号问题