移动端分段验证码输入框自动填充失效问题求助

针对你遇到的分段验证码输入框在移动端自动填充失效的问题，核心原因是系统默认只会将完整验证码填入单个识别为验证码的输入框，而你的分段输入组没有被系统正确识别为一个整体的验证码输入区域。可以通过以下几个调整来解决：

1. 配置标准的验证码自动填充属性 #

将每个分段输入框的autoComplete从通用的"on"改为标准的"one-time-code"，这是W3C定义的验证码专属自动填充标识，能让移动端系统/浏览器明确识别这是验证码输入场景。

2. 新增隐藏主输入框承接完整验证码 #

系统的自动填充逻辑通常只针对单个输入框生效，因此需要添加一个隐藏的输入框作为"载体"，让系统把完整验证码填充到这里，再通过脚本将内容拆分到各个分段输入框中。

3. 实现内容拆分与输入联动逻辑 #

监听隐藏输入框的内容变化，将完整验证码拆分为单个字符分配到对应分段框；同时补充手动输入时的联动逻辑，比如输入后自动跳转到下一个框、删除时退回上一个框，保证用户体验一致。

修改后的完整代码示例 #

import { useState, useEffect, useRef } from 'react';
import { Form } from 'react-bootstrap';

const VerificationCodeInput = () => {
  const [codeSegments, setCodeSegments] = useState(new Array(6).fill(''));
  const hiddenCodeInputRef = useRef(null);

  // 监听隐藏输入框的内容变化，拆分验证码到分段框
  useEffect(() => {
    const handleFullCodeInput = (e) => {
      const fullCode = e.target.value.replace(/\D/g, ''); // 过滤非数字字符
      if (fullCode.length === 6) {
        setCodeSegments(fullCode.split(''));
      }
    };

    const hiddenInput = hiddenCodeInputRef.current;
    if (hiddenInput) {
      hiddenInput.addEventListener('input', handleFullCodeInput);
      return () => hiddenInput.removeEventListener('input', handleFullCodeInput);
    }
  }, []);

  // 分段框输入/删除联动逻辑
  const handleSegmentChange = (index, e) => {
    const inputValue = e.target.value.replace(/\D/g, '');
    const newSegments = [...codeSegments];
    newSegments[index] = inputValue;
    setCodeSegments(newSegments);

    // 输入完成后跳转下一个框
    if (inputValue && index < 5) {
      document.getElementById(`code-segment-${index + 2}`)?.focus();
    }
    // 删除内容后跳转上一个框
    if (!inputValue && index > 0) {
      document.getElementById(`code-segment-${index}`)?.focus();
    }
  };

  return (
    <div className="d-flex align-items-center">
      {/* 隐藏的主输入框，用于接收系统自动填充的完整验证码 */}
      <input
        ref={hiddenCodeInputRef}
        type="text"
        autoComplete="one-time-code"
        inputMode="numeric"
        className="d-none"
        maxLength="6"
      />
      {codeSegments.map((_, i) => (
        <Form.Control
          key={`code-segment-${i + 1}`}
          id={`code-segment-${i + 1}`}
          className="mx-2 p-0 text-center shadow-none verification-code-cell"
          style={{ fontSize: "1.4em", width: "3em" }}
          inputMode="numeric"
          autoComplete="off" // 关闭单个框的自动填充，避免干扰主输入框
          size="lg"
          maxLength="1"
          value={codeSegments[i]}
          onChange={(e) => handleSegmentChange(i, e)}
          autoFocus={i === 0}
        />
      ))}
    </div>
  );
};

export default VerificationCodeInput;

关键调整说明 #

• 隐藏输入框使用autoComplete="one-time-code"，成为系统自动填充的目标，确保完整验证码能被正确接收。
• 每个分段输入框设置autoComplete="off"，避免系统尝试单独填充单个分段框，干扰主逻辑。
• 通过useState维护分段框内容，监听隐藏输入框的变化同步更新所有分段框，实现自动填充的分发。
• 补充输入/删除联动逻辑，让手动输入和自动填充的体验保持一致。

这个方案既解决了移动端自动填充的问题，也保留了手动输入、复制粘贴的原有功能，同时符合系统的自动填充规范。

内容的提问来源于stack exchange，提问作者Ricardo Sanchez