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

更新日期: 2019-10-14阅读: 3.1k标签: 验证码

最近接的新项目,登录注册页根据需求要使用手机号获取验证码登录或者注册,一开始的想法是要做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失去焦点根本就不会出现在页面看到光标的情况


链接: https://fly63.com/article/detial/5922

API 交互中怎么做好图片验证码?

在传统的 Web 开发过程中,处理图形验证码很简单,只需要在后台用随机字符串生成一个图片,将验证码内容放进 Session 即可,用户提交表单时从 Session[1] 取出判断即可。

js点击发送验证码 xx秒后重新发送

用于一些注册类的场景,点击发送验证码,xx秒后重新发送。利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击。

jQuery实现发送验证码30s倒计时,且刷新页面时有效

在这里讲一讲这个案例的实现思路吧(个人见解)。。核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数。这个函数会根据当前的 cookie 值判断 是否处于倒计时阶段

如何实现图形验证码?

细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?

Js获取验证码倒计时

网站中为了防止恶意获取验证短信、验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果。比如:做注册页面时会有获取验证码按钮,点击后过60秒才能重新获取,数字是递减的到0时重新回到最初的状态。实现这个功能只需要一个setInterval和一个clearInterval就能搞定了

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!