当前位置：首页 > 资讯 > 技术文档

js模拟支付宝密码输入框

时间：2022-02-22 05:16 编辑：来源：阅读：
扫一扫，手机访问

摘要：js模拟支付宝密码输入框

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码，供大家参考，具体内容如下效果图： [img]http://files.jb51.net/file_images/article/201704/2017411161337147.jpg?2017311161347[/img] 代码：

<!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>

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

全部评论(0)

上一篇：JS实现向表格行添加新单元格的方法
下一篇：利用JS自动打开页面上链接的实现代码

资讯排行榜
更多>>