主要原理

1.设置inpuit type=password属性，通过i标签控制元素显示或者隐藏来模拟输入的时候的黑点

代码

效果图

// 通过i标签中间的格子
<div class="keyboard">
        <input type="password" minlength="6" maxlength="6" class="keyboard_input" />
        <div class="keyboard_jiange">
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
            <i><b></b></i>
        </div>
    </div>

由于在删除的时候发现总会晚一个空格主要是因为nextAll只能获取他之后的兄弟节点，所以才会造成这种问题

// 通过操作b标签的显示和隐藏来控制黑圆点的展示或者隐藏
            $('.keyboard_input').keyup(function (event) {
                var leng = $(this).val().length;
                var buttonNum = event.which || event.keyCode;
                if (buttonNum == 8) {
                    $(".keyboard_jiange").find("i").eq(leng).prevAll("i").find("b").css({ "display": "block" });
                    $(".keyboard_jiange").find("i").eq(leng).nextAll("i").find("b").css({ "display": "none" });
                    $(".keyboard_jiange").find("i").eq(leng).find("b").css({ "display": "none" });
                } else {
                    if (leng == 6) {
                        $(".keyboard_jiange").find('b').css({ "display": "block" });
                    } else if (leng == 0) {
                        $(".keyboard_jiange").find('b').css({ "display": "none" });
                    } else {
                        $(".keyboard_jiange").find("i").eq(leng).prevAll("i").find("b").css({ "display": "block" });
                        $(".keyboard_jiange").find("i").eq(leng).nextAll("i").find("b").css({ "display": "none" });
                    }
                }
            })

具体详情请见github地址[Daring Fireball]: https://github.com/Xialulu/CipherBox