javascript - TextInput 在满足特定条件后自动跳转到另一个字段

Question

我想要一个输入文本，一旦达到最大值就自动跳转到另一个输入文本字段。

这是示例文本字段。

Identification card:
<input type="text" name="ic[1]" size="15" maxlength="6" pattern="[0-9]*" title="6 number only"> - 
<input type="text" name="ic[2]" size="15" maxlength="2" pattern="[0-9]*" title="2 number only"> - 
<input type="text" name="ic[3]" size="15" maxlength="4" pattern="[0-9]*" title="4 number only">

如何让输入的文本字段在第一个文本字段达到最大数量后立即跳转到另一个字段？就像我们在安装软件时输入序列号一样。如果可能并且需要 javascript，我希望使用简单的 javascript 而不是 jquery。

Answer 1

没有使用 jQuery，是一个非常干净的实现:

• 从 maxlength 属性读取。
• 可扩展到容器内的任意数量的输入。
• 自动找到下一个要关注的输入。
• 没有 jQuery。

http://jsfiddle.net/4m5fg/5/

var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
var target = e.srcElement;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
    var next = target;
    while (next = next.nextElementSibling) {
        if (next == null)
            break;
        if (next.tagName.toLowerCase() == "input") {
            next.focus();
            break;
        }
    }
}
}