六位密码框展示

Pasted Graphic 1.png

html

+'<div class="pop_password">'
              +'<h3>输入密码</h3>'
              +'<p>请输入6位支付密码</p>'
              +'<input type="password" name="password" maxlength="6" id="password">'
              +'<div class="psw_show clearfixed">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
                +' <input type="password" readonly="">'
              +'</div>'
              +'<img src="image/close_psw.png" class="psw_close">'
              +'<a href="javascript:void(0)" class="forget_psw_btn">忘记密码?</a>'
+'</div>'

js

 /**
   * [pop_psw_show 出现密码输入提示框事件]
   * @return {[type]} [description]
   */
  pop_psw_show = function (){
    var top = jqueryMap.$settlement.scrollTop();
    
    //set pop section
    jqueryMap.$pop.css('top',top+'px');
    jqueryMap.$pop.css('height',document.documentElement.clientHeight+'px');

    //set pop_cont again
    jqueryMap.$pop_password.css({'top':'50%','left':'50%','-webkit-transform':'translate(-50%,-50%)'});

    jqueryMap.$pop.css('display','block');
    jqueryMap.$pop_password.css('display','block');
    jqueryMap.$pop_password_input.focus();
  }

  //密码提交验证
  /**
   * [detectPassword 检测密码格式，以及设置密码显示的样式]
   * @return {[type]} [description]
   */
  detectPassword = function (){
    console.log('dd');
    //自定义密码框的思路时 前面设置个opacity为0的input作为主要输入元素，就像自定义select
    //然后下面有个自定义的密码展示框，当输入框元素变化，自定义密码展示框也变化
    var 
      psw_str = jqueryMap.$pop_password_input.val().trim(),
      len     = psw_str.length,
      $input  = jqueryMap.$psw_show.find('input'); 
    
    //设置各个密码框的值  
    for(var i = 0 ; i < len ; i++ ){
     
      $input.eq(i).val(psw_str[i]);
      
    }
    //假设点击删除按钮时
    $input.each(function() {
      var index = $(this).index();
      if (index >= len) {
        $(this).val("");
      }    
    });

    if(psw_str.length == 6){
      if(/\d{6}/.test(psw_str)){
        
      }else{
        console.log(psw_str);
        alert('密码格式不正确')
        return false;
      }

      stateMap.submit_model.password = psw_str;

      //密码验证成功 提交数据
      submitData(); 
    }
  }