提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

jq文本框自动跳转下一个（输入密码）jsdemo效果示例（整理）

密码输入自动密码 一个 示例 效果 整理
2023-09-14 09:04:05 时间 
<!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>


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

相关文章