一个input实现六个格子的验证码输入

用多个input处理6个格子时 会出现输出键盘弹来弹去用js控制很麻烦  用一个input简单方便

<div class="pc_in">
  <div>
    <span class="g_hx"></span>
    <span class="g_hx"></span>
    <span class="g_hx"></span>
    <span class="g_hx"></span>
    <span class="g_hx"></span>
    <span class="g_hx"></span>
  </div>
  <p>
    <input type="text" v-model="paymentCodeValue" maxlength="6" />
  </p>

</div>

 

 

 .pc_in {
    position: relative;
    float: left;
    width: 6.7rem;
    height: 1.12rem;
    margin-top: 0.92rem;
    margin-left: 0.4rem;
    div {
      display: flex;
      width: 100%;
      height: 1.12rem;
      span {
        flex: 1;
        height: 200%;
        border: #E6E8ED solid 1px;
        border-right: none;
        margin-top: -0.56rem;
      }
      span:last-child {
        border-right: #E6E8ED solid 1px;
      }
    }
    p {
      position: absolute;
      width: 7.5rem;
      height: 1.12rem;
      line-height: 1.12rem;
      top: 0;
      left: 0;
      background: none;
      overflow: hidden;
      input {
        float: left;
        width: 120%;
        height: 0.8rem;
        line-height: 0.8rem; 
        margin-top: 0.2rem;
        @include sc(0.4rem, #000000);
        letter-spacing: 0.9rem;
        background: none;
        text-indent: 0.4rem;
      }
    }
  }

 

思路：首先在一个div中写出6个格子 再用一个input定位定在这6个格子上面 并关掉默认的背景（用letter-spacing: 0.9rem; 字体间距来实现）

用一个input输入的时候 输入了6个数字 只要能让它能输入第7个数字 就不会出现格式错误的情况

注意点：

1、用来包裹input标签的父标签要做长一点（我用p标签包裹它一定要比自己的父标签要长一点 就是比6个格子要长一点  因为当输入到第6个数字时 如果input的父标签的长度不够时 input里面的数字会自动往左挤 出现格式错乱）

2、input的父标签不要用overflow: hidden; 用一个input就是要让input的数字溢出一点 就是说你输了6个数字可以看到第7个数字的光标（如果溢出隐藏看不到第7个数字的光标则input里面的数字会自动往左挤）

3、我们做的时候 刚输完第6个数字 就去做业务处理 或者让input失去焦点根本就不会出现在页面看到光标的情况