<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

} </script>