<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动获取焦点</title>
<style>
</style>
</head>
<body>
<div id='form'>
<input type="text" maxlength="3" id='tele1'>
<input type="text" maxlength="4" id='tele2'>
<input type="text" maxlength="4" id='tele3'>
</div>
<script>
var oForm = document.getElementById('form')
var telebox1 = document.getElementById('tele1')
var telebox2 = document.getElementById('tele2')
var telebox3 = document.getElementById('tele3')
telebox1.addEventListener('keyup', tabForward)
telebox2.addEventListener('keyup', tabForward)
telebox3.addEventListener('keyup', tabForward)
function tabForward (e) {
if (e.target.value.length === e.target.maxLength) { // 如果位数达到最大值
for (var i = 0; i < oForm.children.length; i++) { // 遍历寻找下一个input
if (oForm.children[i] === e.target) {
if (oForm.children[i+1]) { // 如果有下一个input
oForm.children[i+1].focus()
}
}
}
}
}
</script>
</body>
</html>