主要原理
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
