JavaScript

超轻量级php框架startmvc

js模拟支付宝密码输入框

更新时间:2020-05-05 14:06:01 作者:startmvc
本文实例为大家分享了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支付宝密码输入 js密码输入框