js模拟支付宝密码输入框

2016年11月30日作者：紫竹玉龙

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码，供大家参考，具体内容如下

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  input{
    width:60px;
    height:60px;
    font-size:40px;
    line-height: 60px;
  }
</style>
<body>
<input type="password"/>
<input type="password"/>
<input type="password"/>
<input type="password"/>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
  $(function(){
    var ww=2222;//服务器验证码
    $('input').eq(0).focus();
    $('input').keyup(function(){
      if($(this).val().length==1){
        $(this).next().focus()
      }
    })
    $('input').eq($('input').length-1).keyup(function(){
          var valed=''
          for(var i=0;i<$('input').length;i++){
            valed=valed+$('input').eq(i).val()
          }
          if(Number(valed)==ww){
            alert('输入正确')
          }else{
            alert('输入错误')
          }
    }
    )
  })
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。