<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本框自动跳转下一个</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.input {
display:block;
width:40px;
height:35px;
float:left;
margin-left:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
</div>
<script>
$(function() {
var inputLength = $('input').length;
//$('input').keyup(function(){})
//使用jQuery事件代理的事件绑定方式，不需要对每个input进行事件绑定，有利于性能优化
$('#body').delegate('input', 'keyup', function() {
var _this = $(this),
valLength = _this.val().length,
index = _this.index();
if (valLength > 0) {
if ((index + 1) > inputLength) return false; //输入完成时进行操作
_this.attr('data-in', 'true').next().focus();
} else if (valLength == 0 && _this.attr('data-in') == 'true') {
if (index == 0) return false; //删除所有时进行操作
_this.attr('data-in', 'false').prev().focus();
}
});
});
</script>
</body>
<html>
<head>
<meta charset="utf-8">
<title>文本框自动跳转下一个</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.input {
display:block;
width:40px;
height:35px;
float:left;
margin-left:10px;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
<input type="text" maxlength="1" class="input">
</div>
<script>
$(function() {
var inputLength = $('input').length;
//$('input').keyup(function(){})
//使用jQuery事件代理的事件绑定方式，不需要对每个input进行事件绑定，有利于性能优化
$('#body').delegate('input', 'keyup', function() {
var _this = $(this),
valLength = _this.val().length,
index = _this.index();
if (valLength > 0) {
if ((index + 1) > inputLength) return false; //输入完成时进行操作
_this.attr('data-in', 'true').next().focus();
} else if (valLength == 0 && _this.attr('data-in') == 'true') {
if (index == 0) return false; //删除所有时进行操作
_this.attr('data-in', 'false').prev().focus();
}
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>验证码输入框</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
input {
width:40px;
height:40px;
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<div id="ipt">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<script>
$('#ipt input:gt(0)').attr('readOnly', 'true');
$('#ipt input').keyup(function() {
if (/^[0-9]{1}$/g.test($(this).val())) {
$(this).next().removeAttr('readOnly').focus();
} else {
alert('请输入1位数字');
$(this).val('');
}
});
</script>
</body>
</html>