当前一个输入元素达到特定大小时，如何将焦点移到另一个输入元素？

Question

我希望所有输入都可以集中精力，具体取决于前一个元素是否已达到特定大小。 该代码工作正常，并且做正确的事情，但是当我使用鼠标选择一个已经具有最大输入量的输入并尝试再次输入元素时，它允许输入元素，而那不是我想要的。 我希望它足够聪明，以知道该字段具有足够的值并且不能接受其他值。 我知道maxlength但不允许使用它。

const smartCursor = (event, fieldIndex, fields) => {
    if (fields[fieldIndex].value.length === fields[fieldIndex].size) {
        if (fields[fieldIndex + 1]) {
            fields[fieldIndex + 1].focus();
        }else {
            fields[fieldIndex].blur();
        }
    }
};

const inputFields = document.querySelectorAll('input');
inputFields.forEach((field, index, fields) => {
    field.addEventListener("keyup", event => {
        smartCursor(event, index, fields);
    }, false);
})

Answer 1

通过使用keyup侦听器，您已经在将其字符输入到输入元素中之后运行了smartCursor函数。 因此，在运行smartCursor之前，将鼠标单击回该输入并点击一个字符将添加该字符。

您可能需要第二个监听器来监听keydown 。

const smartCursor = (event, fieldIndex, fields) => {
    const isBackspaceOrDelete = event.which === 8 || event.which === 46;
    if (!isBackspaceOrDelete && fields[fieldIndex].value.length === fields[fieldIndex].size) {
        if (fields[fieldIndex + 1]) {
            fields[fieldIndex + 1].focus();
        }else {
            fields[fieldIndex].blur();
        }
    }
};

const inputFields = document.querySelectorAll('input');
inputFields.forEach((field, index, fields) => {
    field.addEventListener("keydown", event => {
        smartCursor(event, index, fields);
    }, false);
    field.addEventListener("keyup", event => {
        smartCursor(event, index, fields);
    }, false);
})