效果图

效果一：

320932127029113732.jpg

效果二：

Paste_Image.png

实现方式

将input框移出屏幕，用label来代替其捕捉输入动作，监听input的input事件，根据input的值来绘制圆点，具体见下面的代码：

html

<div class="contain" id="setTradePwd">
  <h2>请设置<em>交易密码</em></h2>
  <span class="note">交易密码用于理财产品的购买与赎回操作</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 密码输入后回调函数
   * @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();
  }
  // 执行
  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当前实例
      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('数据提交中');
      // 发送表单数据
      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