当前位置: 首页 > 工具软件 > jQuery Keypad > 使用案例 >

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

危宜
2023-12-01

今天对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>


 类似资料: