6位数字，输入验证码框

最新推荐文章于 2023-10-27 10:05:22 发布

weixin_30357231

最新推荐文章于 2023-10-27 10:05:22 发布

阅读量546

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liujinyu/p/11156108.html

版权

<!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>

转载于:https://www.cnblogs.com/liujinyu/p/11156108.html

weixin_30357231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6位数字，输入验证码框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫