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

知秋~

已于 2022-06-14 15:08:48 修改

阅读量1.9k

点赞数

文章标签：输入密码

于 2018-04-22 15:14:57 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/80039161

版权

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

知秋~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jq文本框自动跳转下一个（输入密码）jsdemo效果示例（整理）

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;文本框自动跳转下一个&lt;/title&gt;&lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;
复制链接

扫一扫