如果验证函数返回true，则关注next元素

I have multiple inputs which allow a single digit numeric value. The script below confirms the the value is a number.

我有多个输入，允许单个数字的数值。下面的脚本确认值是一个数字。

How can I move focus to the next input when a valid number has been input?

当输入有效数字时，如何将焦点移动到下一个输入？

<input type="text" maxlength="1" onkeypress="return isNumber(event)" required>

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 49 || charCode > 53)) {
        return false;
    }
    return true;
}

2 个解决方案

#1

You can find the next element by using Node.nextElementSibling then assign focus using HTMLElement.focus()

您可以使用Node.nextElementSibling找到下一个元素，然后使用HTMLElement.focus（）指定焦点。

To make it iterate to the next row, you have to check whether currently focused element is the last element in the current row. If so then move to the next line.

要使其迭代到下一行，您必须检查当前焦点元素是否是当前行中的最后一个元素。如果是，则转到下一行。

It is better to use Event.preventDefault() in the Element.onkeydown property and then check to see if the element has been filled in the Element.onkeyup property as the keypress event is fired both when the key is pressed down and again when it is released.

最好在Element.onkeydown属性中使用Event.preventDefault（），然后检查元素是否已在Element.onkeyup属性中填充，因为按下键时按下了按键事件，并且当它按下时再次触发发行了。

var validChar;
var inputs = document.querySelectorAll('td input[type=text]'), i;
for(i = inputs.length - 1; i >= 0; i--) {
    inputs[i].onkeydown = checkNumber;
    inputs[i].onkeyup   = checkFilled;
}
function checkNumber(event) {
    event = (event) ? event : window.event;
    var charCode = (event.which) ? event.which : event.keyCode;
    if (!(charCode >= 48 && charCode <= 53) 
     && !(charCode >= 96 && charCode <= 101)
     && !(charCode == 16 || charCode == 9)) {
            event.preventDefault();
            return false;
    } else if(!(charCode == 16 || charCode == 9)) {
        validChar = true;
    }
}
function checkFilled(event) {
    if(validChar && event.target.value.length === 1) {
        validChar = false;
        nextInput(event.target.parentNode);
    }
}
function nextInput(el) {
    if(el.nextElementSibling) {
        if(!el.nextElementSibling.firstElementChild) {
            nextInput(el.nextElementSibling);
            return false;
        }
        var nextSibling = el.nextElementSibling.firstElementChild;
    } else {
        if(!el.parentNode.nextElementSibling) {
            return false;
        }
        var nextRow = el.parentNode.nextElementSibling;
        if(!nextRow.firstElementChild.firstElementChild) {
            nextInput(nextRow.firstElementChild);
            return false;
        }
        var nextSibling = nextRow.firstElementChild.firstElementChild;
    }
    var nextType = nextSibling.tagName.toLowerCase();
    if(nextType !== "input") {
        nextInput(nextSibling);
        return false;
    }
    nextSibling.focus();
}

<table>
     <tr>
         <td>some text</td>
         <td>some text</td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
     </tr>
     <tr>
         <td>some text</td>
         <td>some text</td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
         <td><input type="text" maxlength="1" required></td>
     </tr>
</table>

#2

-1

In this case, I suggest that you expand the definition of what's now being called an isNumber() function. Pass a second parameter to it, giving the ID of the control that should be moved-to if the input is a number. Then, in that subroutine, quash the event and then setFocus to the proper "next control." Each onkeypress handler would call the same routine, but with a different next-control-id parameter, so that each control sends us on to the proper next-one.

在这种情况下，我建议你扩展现在被称为isNumber（）函数的定义。将第二个参数传递给它，如果输入是数字，则给出应该移动的控件的ID。然后，在该子例程中，撤消事件，然后将setFocus设置为正确的“下一个控件”。每个onkeypress处理程序将调用相同的例程，但使用不同的next-control-id参数，以便每个控件将我们发送到正确的next-one。

I would counsel you: don't try to simulate pressing the Tab key.

我会建议你：不要试图模拟按Tab键。

#1