移动端手机验证码四格、六格的input实现

最近接的新项目，登录注册页根据需求要使用手机号获取验证码登录或者注册，一开始的想法是要做6个inputshur输入框，但是光标问题太严重。在网上看别人的实现方法，发现可以用一个input+6个span或者6个div来做，经过构思，实现了以下的方法。

 

代码

html：

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

less:

.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;
      }
    }
}

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

思路

首先在一个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失去焦点根本就不会出现在页面看到光标的情况