这个案例总的来说很简洁，省去了跨浏览器的检验，比较容易看懂。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动切换焦点</title>
</head>
<body>
<form>
<input type="text" id="txt1" maxlength="5" placeholder="姓名" autofocus></br>
<input type="text" id="txt2" maxlength="3" placeholder="年龄"></br>
<input type="text" id="txt3" maxlength="11" placeholder="手机号">
</form>
</body>
<script>
function tabForward(event) {
//获取当前事件目标
var target = event.target;
//当达到了文本框限制输入的最大值时
if (target.value.length === target.maxLength) {
var form = target.form;
//遍历表单中所有的元素
for (var i = 0; i < form.elements.length; i++) {
//当遍历到的元素为当前值时，则让下一个元素获取焦点
if (form.elements[i] === target) {
//如果下一个元素存在，则让它获取焦点
if (form.elements[i + 1]) {
form.elements[i + 1].focus();
}
}
}
}
}
var txt1 = document.getElementById("txt1");
var txt2 = document.getElementById("txt2");
var txt3 = document.getElementById("txt3");
txt1.addEventListener("keyup", tabForward, false);
txt2.addEventListener("keyup", tabForward, false);
txt3.addEventListener("keyup", tabForward, false);
</script>
</html>
原创文章 3
获赞 13
访问量 1710