改编自高程3第427页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#">
<input type="text" name="text1" maxlength="3"><input type="text" name="text2" maxlength="3"><input type="text" name="text3" maxlength="5">
</form>
<script>
(function(){
function tabFocus(e) {
let target = e.target
let form = target.form
// 曾犯错误:maxLength写成了maxlength
if(target.maxLength === target.value.length) {
for(let i = 0, len = form.elements.length; i < len; i++) {
if(target === form.elements[i] && form.elements[i + 1]) {
form.elements[i + 1].focus()
}
return
}
}
}
let t1 = document.querySelector('[name="text1"]')
let t2 = document.querySelector('[name="text2"]')
let t3 = document.querySelector('[name="text3"]')
t1.addEventListener('keyup', tabFocus, false)
t2.addEventListener('keyup', tabFocus, false)
t3.addEventListener('keyup', tabFocus, false)
})()
</script>
</body>
</html>