欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决password自动填充问题

程序员文章站 2022-07-13 09:55:38
...

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

解决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;
		});

最终效果:

解决password自动填充问题

09网络欢迎您,想知道09网络是干啥的吗?不妨进来看看进来瞧瞧吧!!    09网络

相关标签: password自动填充