移动端输入密文密码功能的实现

看下效果：

首先，密码只能是6位数字，所以不能用type=password的input框，type=password在移动端会调起输入字母的键盘。可以用type=tel或者type=number代替密码输入框，给input框设置“ -webkit-text-security:disc; text-security:disc;” 让输入框中的文字显示为圆点，但是设置了之后发现，在移动端六位密码都快输入完了，密码才开始以圆点显示，也就是说显示的速度要慢几拍，所以最后我是通过js强行修改input输入框的内容为圆点。还有一个问题就是在移动端会在输入密码的时候显示光标，这是我们不想要的，这就需要通过给input设置“caret-color: transparent;”样式，把光标的颜色设置为透明就可以了。
在点击取消按钮的时候要清空所有input框的值并且输入密码的弹层要隐藏。
在输入密码的时候，还需要判断输入的是否是数字，虽然设置了input的type属性为tel或者number，但是用户也有可能输入了标点符号，这个时候就需要每次输入按键弹起的时候写一个正则去判断是否是数字，如果是数字的话，就添加到一个数组变量中，这个数组变量用于存放每个input的值，在点击确认的时候需要把这个数组转成一个字符串提交给后台，如果输入的不是数字的话，就需要清空当前输入框，并且使当前输入框获取焦点，方便用户重新输入。还有一种情况就是用户摁下了删除键，删除的话需要清空上一个input的内容，并且是上一个输入框获取焦点重新输入。

思路和可能出现的情况考虑好了，就可以上代码了。

*.html文件
<!--设置支付密码弹出层-->
<div class="payPwdBox">
    <div class="payPwd">
        <p class="title">输入支付密码</p>
        <div class="pwdBox">
            <input type="tel" maxlength="1" autofocus>
            <input type="tel" maxlength="1" autofocus>
            <input type="tel" maxlength="1" autofocus>
            <input type="tel" maxlength="1" autofocus>
            <input type="tel" maxlength="1" autofocus>
            <input type="tel" maxlength="1" autofocus>
        </div>
        <a href="user.php?act=account_secr">忘记密码？</a>
        <p class="sure">确认</p>
        <p class="cancel">取消</p>
    </div>
</div>

*.css文件
 /*支付密码弹出层*/
        .payPwdBox{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            top: 0;
            display: none
        }
        .payPwd{
            width: 690px;
            height: 500px;
            position: absolute;
            left: 50%;
            margin-left: -345px;
            top: 50%;
            margin-top: -250px;
            background-color: #fff;
            border-radius: 10px;
        }
        .payPwd p.title{
            width: 100%;
            height: 114px;
            line-height: 114px;
            text-align: center;
            border-bottom:1px solid #e6e6e6 ;
            font-size: 36px;
            color: #252525;
        }
        .pwdBox{
            width: 650px;
            height: 102px;
            background-color: #ffffff;
            border-radius: 5px;
            border: solid 1px #e8e7e9;
            margin:0 auto;
            margin-top: 63px;
            position: relative;
        }
        .pwdBox input[type=tel]{
            caret-color: transparent;/*设置输入框光标颜色透明，达到隐藏光标的效果*/
            height: 100%;
            width: 15.9%;
            border-right: 1px solid #e8e7e9;
            line-height: 102px;
            text-align: center;
            font-size: 50px;
            color: transparent;
            text-shadow: 0 0 0 #000;
            /*-webkit-text-security:disc;*/
            /*text-security:disc; !*使用指定形状代替文字显示 circle圆圈 disc 圆形 square 正方形*!*/
        }
        .pwdBox input[type=tel]:last-of-type{
            border-right: none;
        }
        .payPwd a{
            float: right;
            font-size: 28px;
            color: #3d9aea;
            padding:20px;
            margin-top: 10px;
        }
        .payPwd .sure,.payPwd .cancel{
            display: inline-block;
            width: 50%;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border-top:1px solid #e6e6e6 ;
            font-size: 36px;
            color: #252525;
            position: absolute;
            bottom: 0;
        }
        .payPwd .cancel{
            right: 0;
            border-left: 1px solid #e6e6e6;
        }

*.js文件
$('.payPwdBox').fadeIn();
// 输入密码弹出层显示，第一个输入框获取到焦点
$('input[type=tel]').blur().eq(0).focus();
var keycode;
$('input[type=tel]').on('keydown', function (e) {
    keycode = e.keyCode; //获取到哪个键 用来判断摁下的是不是删除键
}).on('keyup', function () {
    var index = $(this).index();
    // 当摁下的删除键的时候，执行deletePwd方法
    if (keycode == 8) {
        deletePwd(index);
    } else {
        $('input[type=tel]').blur().eq(++index).focus();
        // 通过正则判断是不是数字
        // 是数字则添加进用于存放密码的数组里
        // 如果不是，则把当前输入的清空并且获取焦点，使用户重新输入
        var patrn = /^[0-9]*$/;
        var value=$(this).val();
        if (patrn.test(value)) {
            pwd.push(value);
            $(this).val('·');
        }else{
            $('input[type=tel]').eq(--index).val('');
            $('input[type=tel]').eq(index).focus();
        }
    }
});

 // 余额支付系列操作
    var pwd=[]; //用于存放每一个input的值
    var pwdString; //最后的六位密码
    var inputNum=$('.pwdBox input');
    // 支付密码确认
    $('.sure').on('click',function(){
        var that=this;
        $('.payPwdBox').fadeOut();
        pwdString=pwd.join(''); //将数组转化为字符串，用于存放最后的密码
    })
    //支付密码取消
    $('.cancel').on('click',function () {
        // 点击取消的时候清空所有input的值
        for(var i=0;i<inputNum.length;i++){
            inputNum.eq(i).val('');
        }
        $('.payPwdBox').fadeOut();
        // $('input[type=tel]').blur().eq(0).focus();  如果输入密码的弹出层不隐藏的话，输入密码的第一个input框要获取焦点
    });
    // 删除支付密码
    function deletePwd(index){
        $('input[type=tel]').eq(--index).val('').blur().eq(index).focus();
        $('input[type=tel]').blur().eq(index).focus();
        pwd.pop();
    }

可能还存在一些bug，欢迎各位指正。