今天小编跟大家讲解下有关移动端手机验证码四格、六格的input实现 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关移动端手机验证码四格、六格的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; } }}思路首先在一个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失去焦点根本就不会出现在页面看到光标的情况
来源：爱蒂网
