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 !important;
}
.input-juli {
margin-right: 10px;
}
</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 inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="input-juli inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="input-juli inputw" />
<input type="text" name="" id="" value="" maxlength="1" class="inputw"/>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
$('.inputw').on('keyup', function(event) {
if($(this).index() < 4) {
$(this).next('input').focus();
}
});
</script>
</body>
</html>怎么写当输入第一个验证码的时候跳转下一个输入框?删除可以退回删除？跳转实现有点问题
解决方案
$('.inputw').on('keyup', function(event) {
if ($(this).val() != ''){
// 如果不为空
$(this).next('input').focus();
}
});
$('.inputw').on('keydown', function(event) {
var evt = event || window.event;
if ($(this).val() == '' && evt.keyCode == 8){
// 如果为空且按下退回键
$(this).prev('input').focus();
}
});改成以上。
这篇关于javascript - 怎么写当输入第一个验证码的时候跳转下一个输入框?删除可以退回删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
