<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>