效果圖

效果一：

320932127029113732.jpg

效果二：

Paste_Image.png

實現(xiàn)方式

將input框移出屏幕裁替，用label來代替其捕捉輸入動作胯究，監(jiān)聽input的input事件躁绸，根據(jù)input的值來繪制圓點，具體見下面的代碼：

html

<div class="contain" id="setTradePwd">
  <h2>請設(shè)置<em>交易密碼</em></h2>
  <span class="note">交易密碼用于理財產(chǎn)品的購買與贖回操作</span>
  <input class="pwd-input" type="tel" id="pwdInput1">
  <label class="pwd-input-fake" id="pwdInput1Fake" for="pwdInput1">
    <span id="pwdInput1P1"></span>
    <span id="pwdInput1P2"></span>
    <span id="pwdInput1P3"></span>
    <span id="pwdInput1P4"></span>
    <span id="pwdInput1P5"></span>
    <span id="pwdInput1P6"></span>
  </label>
</div>

less

@baseFontSize: 20px;
.px2rem(@which, @size) {  
  @{which}: 1rem * ( @size / @baseFontSize )
}
.pwd-input {
  transform: translateY(-500px);//移出屏幕
  .px2rem(height, 25px);
}
.pwd-input-fake {
  display: inline-block;
  .px2rem(height, 42px);
  .px2rem(width, 252px);
  span {
    display: inline-block;
    margin: 0;
    .px2rem(height, 42px);
    .px2rem(width, 42px);
    border-top: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
    border-left: 1px solid #e3e3e3;
    position: relative;
    &.active:after {
      content:'';
      .px2rem(height, 10px);
      .px2rem(width, 10px);
      display: inline-block;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 1rem;
      background-color: #000011;
      position: absolute;
    }
  }
  span:first-child {
    border-left: 1px solid #bcbcbc;
  }
  span:last-child {
    border-right: 1px solid #bcbcbc;
  }
}

js

/**
   * 仿原生密碼輸入框
   * @param id 隱藏的真實input框
   * @param resolveFunc 密碼輸入后回調(diào)函數(shù)
   * @constructor
   */
  function ImitatePwd(id, resolveFunc) {
    this.id = id;
    this.defer = $.Deferred();
    this.pwd = null;
    this.$span = $('#' + id + 'Fake' + ' span');
    this.spanLen = this.$span.length;
    this.lastPwdLen = 0;
    this.active = 0;
    this.ele = $('#'+id);
    this.resolveFunc = resolveFunc;
  }
  // 綁定input事件
  ImitatePwd.prototype.bindInput = function () {
    var me = this;
    this.ele.on('input', function () {

      pwd = $(this).val();
      // 輸入的密碼長度超過了
      if (pwd.length > me.spanLen) {
        return;
      }

      if (me.lastPwdLen < pwd.length) {
        me.active += 1;
        $('#' + me.id + 'P' + me.active).addClass('active');
        me.lastPwdLen = pwd.length;
      } else {
        $('#' + me.id + 'P' + me.active).removeClass('active');
        me.active -= 1;
        me.lastPwdLen = pwd.length;
      }

      if (pwd.length == me.spanLen) {
        me.defer.resolve(pwd);
      }
    });
    return me.defer.promise();
  }
  // 執(zhí)行
  ImitatePwd.prototype.process = function() {
    this.bindInput().then(this.resolveFunc.bind(this));
  }
  // 刷新
  ImitatePwd.prototype.refresh = function() {
    this.ele.val('');
    this.$span.removeClass('active');
    this.lastPwdLen = 0;
    this.active = 0;
    this.ele.off('input');
    this.defer = $.Deferred();
  }

使用示例

    // 實例化密碼輸入框
    var obj = new J_h5niu.ImitatePwd('tradePwd', resolveFunc);
    obj.process();
    $('#tradePwd').focus();
    // 密碼輸完事件
    function resolveFunc(pwd) {
      // 得到ImitatePwd當(dāng)前實例
      var me = this;
      var params = {
        'productId': $('#productId').val(),
        'isBreakeven': $('#isBreakeven').val(),
        'transAccId': DES.encode($('#transAccId').val()),
        'amount': DES.encode(money.toString()),
        'trdPwd': DES.encode(pwd)
      }
      $.wx.loading('數(shù)據(jù)提交中');
      // 發(fā)送表單數(shù)據(jù)
      J_h5niu.ajaxEs6('/finance_api/charge', params, true)
        .then(function (data) {
          $.wx.hideLoading();
          // 成功
          if (data.code == 0 && data.result) {
            location.replace('/finance/charge_res?trdId=' + data.result.trdId);
          }
          // 失敗株婴，將密碼輸入框刷新重置 
          else {
            $.wx.callback = function () {
              me.refresh();
              me.process();
            }
            $.wx.dialog({
              title: '提示',
              content: data.message
            });
          }
        }, function () {
          // 失敗暑认，將密碼輸入框刷新重置 
          me.refresh();
          me.process();
          $.wx.hideLoading();
        });
    }

歡迎光臨我的博客：http://www.paradeto.com