必威体育Betway必威体育官网
当前位置:首页 > IT技术

解决password自动填充问题

时间:2019-10-14 13:14:23来源:IT技术作者:seo实验室小编阅读:52次「手机版」
 

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" />
    <p class="lock-holder">
	<p 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 />
        </p>
				
	<i class="fa fa-ellipsis-h dot-left"></i> <i class="fa fa-ellipsis-h dot-right"></i>
        <p class="form-group pull-right input-password-box">
	    <label>密码</label>
	    <input name="password" id="password" autocomplete="off" type="text"  οnfοcus="this.type='password'"/>
	</p>
    </p>
    
    <p class="submit"> 
        <span>
             <button class="input-button" id="login" type="button">登录</button>
        </span> 
     </p>
</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网络

相关阅读

MHDD检测不到硬盘的解决办法

进入MHDD4.6,进入软件后,只发现了光驱,没有发现硬盘。在BIOS下却能看到硬盘。可能是因为硬盘是SATA的问题,有2种方法可以解决。方法一

解决Nvidia 显卡驱动安装失败的方法

https://blog.csdn.net/aic1999/article/details/79894797 http://blog.sina.com.cn/s/blog_4d7f24990102wi4c.html 更换显卡之后

Could not autowire field: private com.xxx.dao(已解

最近刚在做一个关于o2o在线资源回收的一个项目,用到的框架就是SSM框架,可能有一段时间没有写代码了,一些常见的错误都折腾了半天,直接

自定义控件中 wrap_content 属性无效的分析解决

问题 在自定义一个类似锁屏页面时间日期样式的控件,继承 View 的时候,发现在 xml 中使用 wrap_content 属性相当于使用了 match_par

Win7 64位操作系统连接HP 1010打印机完美解决方案

工作的第一天就遇到问题,新电脑无法连接老式的HP1010打印机,64位Windows7系统无法连接32位XP网络共享打印机,而32位WIN7就可以。

分享到:

栏目导航

推荐阅读

热门阅读