<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>6位数字验证码</title>
</head>
<body>
<style>
.securityCode {
width: 245px;
margin: 0 auto;
height: 38px;
border: 1px solid #cccccc;
font-size: 0px;
border-radius: 3px;
}
.securityCode>span {
border-right: 1px solid #cccccc;
float: left;
height: 100%;
width: 40px;
font-size: 18px;
text-align: center;
line-height: 38px;
}
.securityCode>span:last-child {
border-right: 0px;
}
</style>
<div id="securityCode" class="securityCode">
<span contenteditable="true"></span>
<span contenteditable="false"></span>
<span contenteditable="false"></span>
<span contenteditable="false"></span>
<span contenteditable="false"></span>
<span contenteditable="false"></span>
</div>
<script>
var vCode = new VerifyCode()
vCode.init(() => {
console.log(vCode.passWord.join(''))
})
function VerifyCode() {
this.domCont = null
this.spans = []
this.passWord = []
this.activeIndex = 0
this.initDomSpans = () => {
this.domCont = document.querySelector('#securityCode')
this.spans = this.domCont.getElementsByTagName('span')
return this
}
this.clear = function () {
this.passWord.length = 0
this.activeIndex = 0
let { spans } = this
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].setAttribute('contenteditable', i == 0 ? true : false)
spans[i].innerHTML = ''
}
}
this.init = function (cb) {
let { spans, passWord, domCont } = this.initDomSpans()
spans[0].focus()
domCont.addEventListener('click', e => {
let acIndex = this.activeIndex !== 6 ? this.activeIndex : 5
spans[acIndex].focus()
})
domCont.addEventListener('keypress', e => {
if (e.target.tagName.toLowerCase() === 'span') {
e.preventDefault()
if (e.target.innerHTML.length === 0 && this.activeIndex < spans.length && e.keyCode !== 8) {
var k = String.fromCharCode(e.charCode)
if (/\d/.test(k)) {
spans[this.activeIndex].innerHTML = k
passWord.push(k)
if (this.activeIndex !== spans.length - 1) {
this.go(this.activeIndex + 1)
}
this.activeIndex++
cb()
} else {
alert('请输入数字密码')
}
}
}
}, false)
domCont.addEventListener('keyup', e => {
e = e || window.event
if (e.keyCode === 8) {
if (this.activeIndex > 0) {
this.activeIndex--
this.back(this.activeIndex)
}
}
}, false)
}
this.go = function (index) {
let { spans } = this
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].setAttribute('contenteditable', i == index ? true : false)
}
spans[index].focus()
}
this.back = index => {
let { spans, passWord } = this
if (index >= 0 && index < spans.length) {
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].setAttribute('contenteditable', i == index ? true : false)
}
spans[index].innerHTML = ''
spans[index].focus()
passWord.pop()
}
}
}
</script>
</body>
</html>
