js模拟支付宝密码输入框

炎热的夏天过去了,凉爽的秋天来了。它是一个收获的季节,也是各种水果最多的时候,红艳艳的苹果扒开绿叶往外瞧;小红灯笼似的枣子挂满枝头;像紫玛瑙的葡萄一串串地挂在葡萄架下,真迷人呀!

本文实例为大家分享了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>

到此这篇关于js模拟支付宝密码输入框就介绍到这了。但不要放纵自己的欲望,那犹如一滩漩涡,会将你卷入无底深渊。真正的青春应该学会掌握方向。更多相关js模拟支付宝密码输入框内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
支付宝小程序tabbar底部导航

jQuery仿移动端支付宝键盘的实现代码

QQ跳转支付宝并自动领红包脚本(最新)

JS 仿支付宝input文本输入框放大组件的实例

js实现数字递增特效【仿支付宝我的财富】