模仿支付寶支付密碼框思路

<style> input[type="password"] { width: 50px; text-align: center; font-size: 24px; font-weight: bold; border-radius: 1px; padding: 8px 0px; border: 1px solid #cccccc; } </style>

<div id="password-content" class="input"> <input type="password" maxlength="1" value="" disabled/><input type="password" maxlength="1" value="" disabled/><input type="password" maxlength="1" value="" disabled/><input type="password" maxlength="1" value="" disabled/><input type="password" maxlength="1" value="" disabled/><input type="password" maxlength="1" value="" disabled /> </div> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#password-content").click(function(){ console.log('#password-content'); var oInput = $(".input input"); oInput.attr('disabled'); for(var i=0;i<oInput.length;i++) { if(oInput[i].value == '') { oInput[i].disabled=''; oInput[i].focus(); break; } if(i==5) { oInput[i].removeAttribute("disabled"); oInput[i].focus(); } } document.getElementById("password-content").addEventListener('keyup',myFunction); }); });

function myFunction() {

var oInput = $(".input input");
	oInput.attr('disabled','disabled');

if(event.keyCode == 8)
{
	for(var i=oInput.length-1;i>=0;i--)
	{
		if(oInput[i].value != '')
		{
			oInput[i].removeAttribute("disabled");
			oInput[i].focus();
			break;
		}
		if(i==0)
		{
			oInput[i].removeAttribute("disabled");
			oInput[i].focus();
			break;
		}
	}
}
else if(event.keyCode != 8 && event.keyCode >= 0)
{
	for(var i=0;i<oInput.length;i++)
	{
		if(oInput[i].value == '')
		{
			oInput[i].removeAttribute("disabled");
			oInput[i].focus();
			break;
		}
		if(i==5)
		{
			oInput[i].removeAttribute("disabled");
			oInput[i].focus();
			break;
		}
	}
}

} </script>