仿支付宝验证码

Html

Css

.demo {
	width:462px;
	margin:30px auto 28px auto;
	height:62px;
	position:relative;
}
input {
	width:58px;
	height:58px;
	display:inline-block;
	float:left;
	margin-left:10px;
	outline:none;
	text-align:center;
	line-height:58px;
	font-size:35px;
	font-weight:800;
	border:1px solid #dddddd;
}
.border {
	border:1px solid #ff7400!important;
}

onload = function() {
    var wrap = document.getElementById("demo");
    var txts = wrap.getElementsByTagName("input");
    for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        t.index = i;
        t.setAttribute("readonly", "readonly");
        t.onkeyup = function(event) {
            this.value = this.value.replace(/\D/g, '');
            var event = event || window.event;
            if (event.keyCode == 8) {
                this.value = "";
                var next = this.index - 1;
                var last = this.index;
                if (next < 0) return;
                txts[next].removeAttribute("readonly");
                txts[next].focus();
                txts[last].setAttribute("readonly", "readonly");
                txts[next].className = "border";
                txts[last].classList.remove("border");
            } else {
                if (this.value == "") {
                    return false;
                }
                var next = this.index + 1;
                var last = this.index;
                if (next > txts.length - 1) return;
                txts[next].removeAttribute("readonly");
                txts[next].focus();
                txts[last].setAttribute("readonly", "readonly");
                txts[next].className = "border";
                txts[last].classList.remove("border");
            }
        };
    }
    txts[0].removeAttribute("readonly");
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

仿支付宝验证码



代码描述：仿支付宝验证码（优化删除以及样式）

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

ymfever

相关代码

仿支付宝验证码

最新