zoukankan      html  css  js  c++  java
  • 移动端手机验证码四格、六格的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;
         6.7rem;
        height: 1.12rem;
        margin-top: 0.92rem;
        margin-left: 0.4rem;
        div {
          display: flex;
           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;
           7.5rem;
          height: 1.12rem;
          line-height: 1.12rem;
          top: 0;
          left: 0;
          background: none;
          overflow: hidden;
          input {
            float: left;
             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失去焦点根本就不会出现在页面看到光标的情况

  • 相关阅读:
    windows7安装django并创建第一个应用
    windows7下安装python环境和django
    js中caller和callee属性详解
    分享一个Python脚本--统计redis key类型数据大小分布
    你真的懂git 吗
    如何禁止打印页面
    ZooKeeper入门实战教程(一)-介绍与核心概念
    【shell】shell中各种括号的作用()、(())、[]、[[]]、{}
    Web Components 入门实例教程
    npx 使用教程
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13815155.html
Copyright © 2011-2022 走看看