Jquery keypad 输入框应对多个文本框修改实例

最新推荐文章于 2024-12-19 16:21:30 发布

exartcn

最新推荐文章于 2024-12-19 16:21:30 发布

阅读量600

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/exartcn/article/details/52165041

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文记录了如何使用jQuery Keypad修改以适应一个输入框在达到字数限制后自动切换到下一个文本框的业务需求。通过同事的帮助，成功解决了封装对象的修改问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天对Jquery keypad 进行了修改,因为keypad是已封装对象,修改时,由于对语法以及规则不太熟悉,耗费了不少时间,不过在同事的帮助下,最终达到业务需求

业务需求,一个输入框,应对多个文本框,在某个文本框达到字数限制后,自动跳转到另一个文本框

<script>

$(document).ready(function() {
	var textInput="";
	if($("#telLastNumber").val()!=""){
		textInput= $("#telLastNumber");
	}else if($("#telMiddleNumber").val()!="" && $("#telLastNumber").val()==""){
		textInput= $("#telMiddleNumber");
	}else{
		textInput= $("#telAreaNumber");
	}

	var telKeypad = $("#acTelKeypad");

	telKeypad.keypad({
		target : textInput,
		layout : numLayout,
		clearText : 'ｸﾘｱ',
		backText : '訂正',
		onKeypress : telKeypad_OnKeypress,
		keypadOnly : false
	});

	function telKeypad_OnKeypress(key, value, keypad) {
		debugLog("key: " + key);

		var target = telKeypad.keypad("option", "target");
		var targetId = target.prop("id");
		var targetMaxLength = target.prop("maxlength");

		if (key == $.keypad.DEL) {
			debugLog("Clear!");

			$("input[type='text']").val("");
			telKeypad.keypad("option", "target", $("#telAreaNumber"));
		} else if (value.length >= targetMaxLength) {
			debugLog("maxLength 到着");

			if (targetId == "telAreaNumber") {
				telKeypad.keypad("option", "target", $("#telMiddleNumber"));
			} else if (targetId == "telMiddleNumber") {
				telKeypad.keypad("option", "target", $("#telLastNumber"));
			}
		} else if (value.length < 1) {
			if (targetId == "telLastNumber") {
				telKeypad.keypad("option", "target", $("#telMiddleNumber"));
			} else if (targetId == "telMiddleNumber") {
				telKeypad.keypad("option", "target", $("#telAreaNumber"));
			}
		}
	}
});
</script>