主要原理
1.設(shè)置inpuit type=password屬性，通過i標(biāo)簽控制元素顯示或者隱藏來模擬輸入的時候的黑點
代碼
效果圖
// 通過i標(biāo)簽中間的格子
<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>
由于在刪除的時候發(fā)現(xiàn)總會晚一個空格主要是因為nextAll只能獲取他之后的兄弟節(jié)點担平，所以才會造成這種問題
// 通過操作b標(biāo)簽的顯示和隱藏來控制黑圓點的展示或者隱藏
$('.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
