使用自动完成和自动对焦的分段输入字段

Answer 1

从外观上看，您正在使用

React-bootstrap

库来实现您的目标。考虑到这一点，您可以在第一个输入字段上尝试

onPaste

事件，并将粘贴的字符分发到其他输入字段。如下所示：

// handlePaste function
const handlePaste = (e) => {
    e.preventDefault();
    const pastedData = e.clipboardData.getData("text");
    const digits = pastedData.split("").slice(0, 6);
    digits.forEach((digit, index) => {
      if (inputRefs.current[index]) {
        inputRefs.current[index].value = digit;
        if (index < 5) {
          inputRefs.current[index + 1].focus();
        }
      }
    });
  };
// Some of your code...

{[1, 2, 3, 4, 5, 6].map((i) => (
          <Form.Control
            key={"code-cell-" + i}
            name={"code-cell-" + i}
            className="mx-2 p-0 text-center shadow-none verification-code-cell"
            style={{ fontSize: "1.4em", width: "3em" }}
            inputMode="numeric"
            autoComplete="on"
            size="lg"
            maxLength="1"
            autoFocus={i === 1}
            ref={(el) => (inputRefs.current[i - 1] = el)}
            onChange={(e) => handleInputChange(i - 1, e)}
            onPaste={i === 1 ? handlePaste : null}
          />
        ))}

您可以在这里找到上述代码示例的实现