6位数字,输入验证码框

Wesley13
• 阅读 726
<!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>
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
svg 高宽随父元素自适应
<htmllang"en"<head<metacharset"UTF8"<metaname"viewport"content"widthdevicewidth,initialscale1.0"<metahttpequiv"XUACo
Easter79 Easter79
3年前
vue 2.0 第一个坑,组件不显示的问题
<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<titleappcomponent</title</head<body<ol<todoitem</todoit
Easter79 Easter79
3年前
three.js 显示三维模型(贴图)
<!DOCTYPEhtml<htmllang"en"   <head      <titleid"h2"</title      <metacharset"utf8"      <metaname"viewport"content"widthdevicewidth,user
Wesley13 Wesley13
3年前
MUI上传文件的方法
<!doctypehtml<html<head<metacharset"UTF8"<title</title<metaname"viewport"content"widthdevicewidth,init
Wesley13 Wesley13
3年前
QQ空间说说生成器
index.html<html<head<metaname"viewport"content"widthdevicewidth,initialscale1,userscalableno"<stylebody{margin:0;padding:
Stella981 Stella981
3年前
JS 手机端多张图片上传
代码如下<!DOCTYPEhtml<htmllang"zhcn"<head<metacharset"utf8"<metahttpequiv"XUACompatible"content"IEedge"<metaname"v
Stella981 Stella981
3年前
ES6中的map和reduce
一 实战<!DOCTYPEhtml<htmllang"en"<head<metacharset"UTF8"<metaname"viewport"content"widthdevicewidth,initialscale1.0"
Wesley13 Wesley13
3年前
HTML5 基础知识(二)
<!DOCTYPEhtml<htmllang"en"<head<metacharset"utf8"/<title</title</head<body</body</html<!DOCTYPEhtml
Wesley13 Wesley13
3年前
2D游戏制作:第五周作业
一,寻找不同颜色1.index.html<!DOCTYPEhtml\<htmllang\"en"\<head\<metacharset\"UTF8"\<metaname\"viewport"content
Wesley13 Wesley13
3年前
CSS 背景图片 添加 重复和定位。
<!doctypehtml<htmllang"en"<head<metacharset"UTF8"<metaname"Generator"content"EditPlus®"<metaname"Author"content""<metaname"Keywords"content