移动端获取验证码样式

验证码样式设置

.re-tel-c {

  padding: 1.92rem;

  font-size: 1.28rem;

}

.re-tel-c h6 {

  font-size: 2.32rem;

  font-weight: 500;

  margin-bottom: 1.92rem;

}

.re-tel-c .re-c-intor {

  color: #81838C;

}

.re-tel-c .re-c-intor span {

  color: #FFD100;

}

.re-tel-c .code {

  width: 100%;

  height: 12rem;

}

.re-tel-c .code #yzm {

  width: 0;

  border: 0;

  padding: 0;

  margin: 0;

  height: .44rem;

  position: absolute;

  outline: none;

  color: transparent;

  text-shadow: 0 0 0 transparent;

  width: 300%;

  margin-left: -100%;

  background: none;

  margin-top: 7.2rem;

}

.re-tel-c .code #yzmTable {

  margin: 0 auto;

  height: 4rem;

  margin-top: 8rem;

  /* border: 1/@r solid red; */

  /* opacity: 0.1; */

}

.re-tel-c .code #yzmTable span {

  display: block;

  width: 4.88rem;

  height: 4rem;

  float: left;

  border-radius: 0.2rem;

  text-align: center;

  line-height: 2.4rem;

  font-size: 2.72rem;

  font-weight: 900;

  color: #FFD100;

  height: 2.4rem;

  margin-left: 5.7%;

  top: 0.8rem;

  position: relative;

}

.re-tel-c .code #yzmTable span:before {

  content: '';

  position: absolute;

  bottom: -1.44rem;

  left: 0;

  width: 100%;

  height: 0.16rem;

  background: #211E33;

}

.re-tel-c .code #yzmTable span.active {

  position: relative;

}

.re-tel-c .code #yzmTable span.active:before {

  content: '';

  position: absolute;

  bottom: -1.44rem;

  left: 0;

  width: 100%;

  height: 0.16rem;

  background: #FFD100;

}

.re-tel-c .second {

  color: #A8AAB3;

  margin-bottom: 4.96rem;

  margin-left: 9.04rem;

}

.re-tel-c .second.active {

  color: #FFD100 ;

}

.re-tel-c .rtc-btn {

  width: 100%;

  height: 3.2rem;

  border-radius: 1.6rem;

  background: #211E33;

  color: #81838C;

  text-align: center;

  line-height: 3.2rem;

}

.re-tel-c .rtc-btn.active {

  background: #FFD100;

  color: #5E4D00;

}

<div class="re-tel-c">

      <h6>身份验证</h6>

      <p class="re-c-intor">我们已向<span>123456787654</span> 发送了一个4位数的验证码</p>

      <div class="code">

        <input id="yzm" type="tel" maxlength="4" value="" oninput="yzmInsert()">

        <div id="yzmTable">

          <span class="active" id="s_1" onclick="intoYzm(1)">&nbsp;&nbsp;</span>

          <span id="s_2" onclick="intoYzm(2)">&nbsp;&nbsp;</span>

          <span id="s_3" onclick="intoYzm(3)">&nbsp;&nbsp;</span>

          <span id="s_4" onclick="intoYzm(4)">&nbsp;&nbsp;</span>

        </div>

      </div>

      <p class="second active">重新获取·58S</p>

      <p class="rtc-btn active">下一步</p>

    </div>

function intoYzm(index) {

      var ele = document.getElementById("yzm");

      $('#yzmTable span').eq(index-1).addClass('active');

      ele.focus()

    }

    function yzmInsert() { // input内容改变时触发

      for (var i = 1; i <= 4; i++) {

        var nextId = 's_' + i

        document.getElementById(nextId).innerHTML = '&nbsp;&nbsp;'

        $('#yzmTable span').eq(i).removeClass('active');

      }

      var yzm = document.getElementById("yzm").value

      var yzmArr = yzm.split('');

      for (var i = 0; i < yzmArr.length; i++) {

        const num = yzmArr[i];

        var id = 's_' + Number(i + 1);

        $('#yzmTable span').eq(i).addClass('active');

        document.getElementById(id).innerHTML = '&nbsp;' + num + '&nbsp;'

      }

    }

    // 收起软键盘的方法，点击除了输入框之外的其他区域就收起软键盘

    $('body').on('touchend', function(el) {

      if (el.target.tagName != 'SPAN') {

        $('yzm').blur()

      }

    })