<!DOCTYPE html> <html> <head> <script src="scripts/jquery-1.7.1.min.js"></script> <title>手机端六位密码输入</title> <style> .pwd-box{ 310px; padding-left: 1px; position: relative; border: 1px solid #9f9fa0; border-radius: 3px; overflow:hidden } .pwd-box input[type="tel"]{ 99%; height: 45px; color: transparent; position: absolute; top: 0; left: 0; border: none; font-size: 18px; opacity: 0; z-index: 1; letter-spacing: 35px; } .fake-box input{ 44px; height: 48px; border: none; border-right: 1px solid #e5e5e5; text-align: center; font-size: 30px; } .fake-box input:nth-last-child(1){ border:none; } </style> </head> <body> <div class="pwd-box"> <input type="tel" maxlength="6" class="pwd-input" > <div class="fake-box"> <input type="password" readonly=""> <input type="password" readonly=""> <input type="password" readonly=""> <input type="password" readonly=""> <input type="password" readonly=""> <input type="password" readonly=""> </div> </div> <script> $(function(){ var $input = $(".fake-box input"); $(".pwd-input").on("input", function() { var pwd = $(this).val().trim(); for (var i = 0, len = pwd.length; i < len; i++) { $input.eq("" + i + "").val(pwd[i]); } $input.each(function() { var index = $(this).index(); if (index >= len) { $(this).val(""); } }); if (len == 6) { //执行其他操作 } }); }) </script> </body> </html>
