6位数字，输入验证码框

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>6位数字验证码</title>
9</head>
10
11<body>
12  <style>
13    .securityCode {
14      width: 245px;
15      margin: 0 auto;
16      height: 38px;
17      border: 1px solid #cccccc;
18      font-size: 0px;
19      border-radius: 3px;
20    }
21
22    .securityCode>span {
23      border-right: 1px solid #cccccc;
24      float: left;
25      height: 100%;
26      width: 40px;
27      font-size: 18px;
28      text-align: center;
29      line-height: 38px;
30    }
31
32    .securityCode>span:last-child {
33      border-right: 0px;
34    }
35  </style>
36
37  <div id="securityCode" class="securityCode">
38    <span contenteditable="true"></span>
39    <span contenteditable="false"></span>
40    <span contenteditable="false"></span>
41    <span contenteditable="false"></span>
42    <span contenteditable="false"></span>
43    <span contenteditable="false"></span>
44  </div>
45
46  <script>
47
48    var vCode = new VerifyCode()
49    vCode.init(() => {
50      console.log(vCode.passWord.join(''))
51    })
52
53    function VerifyCode() {
54      this.domCont = null
55      this.spans = []
56      this.passWord = []
57      this.activeIndex = 0
58
59      this.initDomSpans = () => {
60        this.domCont = document.querySelector('#securityCode')
61        this.spans = this.domCont.getElementsByTagName('span')
62        return this
63      }
64      this.clear = function () {
65        this.passWord.length = 0
66        this.activeIndex = 0
67        let { spans } = this
68        for (var i = 0, len = spans.length; i < len; i++) {
69          spans[i].setAttribute('contenteditable', i == 0 ? true : false)
70          spans[i].innerHTML = ''
71        }
72      }
73      this.init = function (cb) {
74        let { spans, passWord, domCont } = this.initDomSpans()
75        spans[0].focus()
76        domCont.addEventListener('click', e => {
77          let acIndex = this.activeIndex !== 6 ? this.activeIndex : 5
78          spans[acIndex].focus()
79        })
80        domCont.addEventListener('keypress', e => {
81          if (e.target.tagName.toLowerCase() === 'span') {
82            e.preventDefault()
83            if (e.target.innerHTML.length === 0 && this.activeIndex < spans.length && e.keyCode !== 8) {
84              var k = String.fromCharCode(e.charCode)
85              if (/\d/.test(k)) {
86                spans[this.activeIndex].innerHTML = k
87                passWord.push(k)
88                if (this.activeIndex !== spans.length - 1) {
89                  this.go(this.activeIndex + 1)
90                }
91                this.activeIndex++
92                cb()
93              } else {
94                alert('请输入数字密码')
95              }
96            }
97          }
98        }, false)
99        domCont.addEventListener('keyup', e => {
100          e = e || window.event
101          if (e.keyCode === 8) {
102            if (this.activeIndex > 0) {
103              this.activeIndex--
104              this.back(this.activeIndex)
105            }
106          }
107        }, false)
108      }
109      this.go = function (index) {
110        let { spans } = this
111        for (var i = 0, len = spans.length; i < len; i++) {
112          spans[i].setAttribute('contenteditable', i == index ? true : false)
113        }
114        spans[index].focus()
115      }
116      this.back = index => {
117        let { spans, passWord } = this
118        if (index >= 0 && index < spans.length) {
119          for (var i = 0, len = spans.length; i < len; i++) {
120            spans[i].setAttribute('contenteditable', i == index ? true : false)
121          }
122          spans[index].innerHTML = ''
123          spans[index].focus()
124          passWord.pop()
125        }
126      }
127    }
128  </script>
129</body>
130
131</html>

6位数字，输入验证码框

评论区

相关推荐