javascript - 怎么在第一个框输入验证码的第一个数字后自动跳转到下一个呢？
本文介绍了javascript - 怎么在第一个框输入验证码的第一个数字后自动跳转到下一个呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>验证码</title>
<style>
body{
font-family: "Microsoft YaHei";
padding: 0;
margin: 0;
}
.sweet-overlay{
position: fixed;
opacity: 1.02;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.sweet-alert{
background-color: white;
font-family: 'Microsoft Yahei';
width: 300px;
height: 200px;
padding: 20px 0;
border-radius: 5px;
/*text-align: center;*/
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -130px;
overflow: hidden;
/*display: none;*/
z-index: 2000;
}
.sweet-yzm{
width: 220px;
margin: 0 auto;
}
.input-yzm input{
width: 35px;
height: 35px;
text-align: center;
margin-top:20px;
}
.input-yzm input:hover{
border:1px solid #587d18;
}
.input-juli{
margin-right: 17px;
}
</style>
<script>
</script>
</head>
<body>
<div class="sweet-overlay" style="display: block;">
</div>
<div class="sweet-alert">
<div class="sweet-yzm">
<div style="font-size: 16px;color: #333333;text-align: center;">请输入一下图形中的字母</div>
<div style="width: 220px;height: 50px;background: greenyellow;margin: 20px auto;overflow: hidden;">
</div>
<div style="text-align: right;margin-top: -10px;"><a style=" color: #8f8f8f" href="#">看不清？换一张</a></div>
<form class="input-yzm">
<input type="text" name="" id="" value="" maxlength="1" class="input-juli"/>
<input type="text" name="" id="" value="" maxlength="1" class="input-juli" />
<input type="text" name="" id="" value="" maxlength="1" class="input-juli" />
<input type="text" name="" id="" value="" maxlength="1" />
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script>
// $('.input-yzm').ready(function(){
// if($(this).index() > 0 ){
// $(this).next('input').focus();
// }
// });
</script>
</body>
</html>解决方案
$('.input-juli').on('keyup', function() {
var $input = $(this).next('input');
if($input.length > 0) {
$input.focus();
}
});这篇关于javascript - 怎么在第一个框输入验证码的第一个数字后自动跳转到下一个呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
