如何实现一个比较高大上的输入验证码的样式呢？类似下图这种

实现思路是这样的，一个隐藏的input框加上6个显示的span标签，将input和span的数据进行绑定。具体实现思路如下（vue）

<div class="input">
      <label class="simple-input-content" for="simpleInput">
        <p v-show="simpleInput.length === 0" class="placeholder">请输入验证码</p>
        <span class="highlight">{{simpleInput.slice(0,1)}}</span>
        <span :class="simpleInput.length > 0?'highlight':''">{{simpleInput.slice(1,2)}}</span>
        <span :class="simpleInput.length > 1?'highlight':''">{{simpleInput.slice(2,3)}}</span>
        <span :class="simpleInput.length > 2?'highlight':''">{{simpleInput.slice(3,4)}}</span>
        <span :class="simpleInput.length > 3?'highlight':''">{{simpleInput.slice(4,5)}}</span>
        <span :class="simpleInput.length > 4?'highlight':''">{{simpleInput.slice(5,6)}}</span>
      </label>
      <input autofocus="autofocus" class="simple-input" v-model="simpleInput" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码">
    </div>

// js 监听最后一位的输入

watch: {
    simpleInput(val) {
      if (val.length === 6) {
        Indicator.open({
          text: '正在验证',
          spinnerType: 'fading-circle',
        })
        this.$get('/api/yezhu/xieyi/verifyMessage', {
          params: {
            application: 'haozan',
            sms_code: val,
          },
        }).then((res) => {
          Indicator.close()
          if (res.errno === 0) {
            Toast('验证成功')
            this.$get('/api/yezhu/xieyi/qianshuxieyi', {
              params: {
                application: 'haozan',
              },
            }).then((response) => {
              if (response.errno === 0 && response.data && response.data.status === 3) {
                this.$router.replace({ path: '/haozanxieyi' })
              } else {
                Toast('签署失败，请重新签署')
                setTimeout(() => {
                  this.$router.replace({ path: '/haozanxieyi' })
                }, 1000)
              }
            })
          } else if (res.errno === -3) {
            this.errorText = '短信验证码已过期，请重新获取'
          } else {
            this.errorText = '短信验证码输入错误，请重新输入'
          }
        })
      }
    },
  },

  data() {
    return {
      simpleInput: '',
    }
  },

  // css

  .input{
    position: relative;
    margin-top: 56px;
    .simple-input-content {
      display: flex;
      justify-content: space-between;
      .placeholder{
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #CECECE;
        letter-spacing: 0;
        line-height: 16px;
        position: absolute;
        bottom: 13px;
      }
      span {
        font-family: PingFangSC-Semibold;
        font-size: 24px;
        color: #222222;
        letter-spacing: 0;
        line-height: 32px;
        // border-radius: 2px;
        vertical-align: middle;
        text-align: center;
        border-bottom: 1px solid #E6E6E6;;
        display: inline-block;
        height: 32px;
        width: 43px;
        &.highlight {
          border-color: #0984F9;
        }
      }
    }
    .simple-input{
      position: absolute;
      bottom: 0;
      width: 100%;
      opacity: -1;
      height: 32px;
    }
  }

赏

谢谢你请我吃糖果

微信