如果验证函数 returns 为真，则聚焦下一个元素

Question

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

输入有效数字后，如何将焦点移至下一个输入？

<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;
}

Answer 1

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

我建议你：不要尝试模拟按下 Tab 键。

Answer 2

您可以使用 Node.nextElementSibling then assign focus using HTMLElement.focus()

找到下一个元素

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

最好在Element.onkeydown属性中使用Event.preventDefault()，然后在Element.onkeyup属性中查看元素是否已经填充因为 keypress 事件会在按下按键和松开按键时触发。

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>

如果验证函数 returns 为真，则聚焦下一个元素

Focus next element if validation function returns true

html

javascript

jquery

javascript-events