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