防止页面密码被浏览器记住处理办法

问题描述：浏览器会提供自动保存密码功能，我刚刚输入了用户名和密码，单击了浏览器提供的保存密码。而当我访问另外一个页面的时候，因为存在一个type=password的input，在浏览器中，却在这里把我刚刚保存的用户名和密码显示出来了。
    
    为解决这两个问题，浏览了一些国内和国外的网站。

    对于问题一：是因为type=password引起的，保存了密码之后，进入另一个页面的时候，如果有type=password，浏览器会寻找与它临近的input type=text，将用户名填上。
    由此，解决方法有：仍然使用type=password，只是增加了fake input control，即在此之前加上

HTML 代码

		


			


				

					1
				

			

			


			

		

		


			


				


					


					

				

				


					


					

				

				


					

						<input type="text" style="display:none;" />
					

				

				


				

				


					


					

				

			

		

		


			


			

			


			

		

，用于混淆浏览器。
    第二个方法，使用type=text，当用户输入密码的时候进行编码，即转换成小圆点，这里写了一段代码，首先是两个控件，hidden的控件用于提交表单：

HTML 代码

		


			


				

					1
				

				

					2
				

				

					3
				

			

			


			

		

		


			


				


					


					

				

				


					


					

				

				


					

						<input type="hidden" name="test.cvvCode" />
					

					

						<input id="cvvCode" type="text" aria-required="true" maxlength="4" />
					

					


					

				

				


				

				


					


					

				

			

		

		


			


			

			


			

		

    用于编码的JS代码：

HTML 代码

		


			


				

					1
				

				

					2
				

				

					3
				

				

					4
				

				

					5
				

				

					6
				

				

					7
				

				

					8
				

				

					9
				

				

					10
				

				

					11
				

				

					12
				

				

					13
				

				

					14
				

				

					15
				

				

					16
				

				

					17
				

				

					18
				

				

					19
				

				

					20
				

				

					21
				

				

					22
				

				

					23
				

				

					24
				

				

					25
				

				

					26
				

				

					27
				

				

					28
				

				

					29
				

				

					30
				

			

			


			

		

		


			


				


					


					

				

				


					


					

				

				


					

						<script type="text/javascript">
					

					

						    if(isIE)  
					

					

						    {  
					

					

						        document.getElementById("cvvCode").onpropertychange = MaskPassword();  
					

					

						    }  
					

					

						    else //FF  
					

					

						    {  
					

					

						        document.getElementById("cvvCode").addEventListener("input", MaskPassword, false);  
					

					

						    }  
					

					

						    function MaskPassword(){
					

					

						    var inputPassword = document.getElementById("cvvCode").value;
					

					

						        var plainPassword = document.getElementsByName("test.cvvCode")[0].value;
					

					

						        var encodePassword = '';
					

					

						        if (inputPassword != '') {
					

					

						            for (var i=0; i<inputPassword.length; i++) {
					

					

						                if (inputPassword.charAt(i) == "\u25CF"){ // has been encode
					

					

						                    encodePassword += inputPassword.charAt(i);
					

					

						                } else{
					

					

						                    plainPassword += document.getElementById("cvvCode").value.charAt(i)
					

					

						                    encodePassword += "\u25CF";
					

					

						                }
					

					

						            }
					

					

						        } else{
					

					

						            plainPassword = inputPassword;
					

					

						        }
					

					

						        document.getElementsByName("test.cvvCode")[0].value = plainPassword;
					

					

						        document.getElementById("cvvCode").value = encodePassword;
					

					

						    }
					

					

						script>
					

					


					

				

				


				

				


					


					

				

			

		

		


			


			

			


			

		

    首先判断是什么浏览器，然后绑定什么方法，onpropertychange是IE专有的。
    后面方法是输入一位，改变一位，变成“\u25CF”小圆点，然后赋值为隐藏域，进行提交表单。
    这样的不足之处是：按F12，hidden的value会显示出来。

    对于问题二：
    原来有个属性autocomplete=off，现在随着浏览器的升级，IE11，Chrome34+，FireFox30都不再支持这个属性了，由此使用这个方法不能解决问题二。
    关于各大浏览器disable这个属性，有的说是，用户输入用户名和密码后，浏览器没有弹出自动保存密码的对话框的话，用户会认为浏览器有问题；还有人认为这是浏览器的bug。
    现在用的是两个fake input control，即在原来的type=password控件前添加：

HTML 代码

		


			


				

					1
				

				

					2
				

			

			


			

		

		


			


				


					


					

				

				


					


					

				

				


					

						<input type="text" id="fakeUserId" style="display:none;" />
					

					

						<input type="password" id="fakePwd" style="display:none;" />
					

				

				


				

				


					


					

				

			

		

		


			


			

			


			

		

    这样一来，IE和Chrome不再弹了，但是火狐还是会弹出自动保存密码对话框。

    这个是转载 http://www.w3cfuns.com/notes/16116/8741cbfbd6bc8bc75c1401326922e29f.html的

   根据上面的方法最终的处理办法
   一、在  下面添加以下代码
function IEAndFF(){
   document.getElementsByName("password").onpropertychange = MaskPassword();
    }
function MaskPassword(){
var inputPassword = document.getElementById("login_pwd").value;
var plainPassword = document.getElementsByName("password")[0].value;
var encodePassword = '';
if (inputPassword != '') {
for (var i=0; iif (inputPassword.charAt(i) == "\u25CF"){ // has been encode
encodePassword += inputPassword.charAt(i);
} else{
plainPassword += document.getElementById("login_pwd").value.charAt(i)
encodePassword += "\u25CF";
}
}
} else{
plainPassword = inputPassword;
}
document.getElementsByName("password")[0].value = plainPassword;
document.getElementById("login_pwd").value = encodePassword;
}

onkeyup="IEAndFF()" ;/>


最终在借鉴原创的基础上终于骗过了浏览器。