当前位置：首页 > React

react如何按顺序输入密码框

2026-01-25 21:32:59React

实现顺序密码输入框的方法

使用多个输入框并自动跳转焦点 创建多个独立的input元素，每个输入框只允许输入一个字符。通过监听onChange事件，在输入后自动将焦点移动到下一个输入框。

const PasswordInput = ({ length = 4 }) => {
  const [values, setValues] = useState(Array(length).fill(''));
  const inputRefs = useRef([]);

  const handleChange = (index, e) => {
    const newValues = [...values];
    newValues[index] = e.target.value.slice(0, 1);
    setValues(newValues);

    if (e.target.value && index < length - 1) {
      inputRefs.current[index + 1].focus();
    }
  };

  return (
    <div>
      {Array.from({ length }).map((_, index) => (
        <input
          key={index}
          ref={(el) => (inputRefs.current[index] = el)}
          type="text"
          maxLength={1}
          value={values[index]}
          onChange={(e) => handleChange(index, e)}
          style={{ width: '30px', margin: '5px' }}
        />
      ))}
    </div>
  );
};

处理退格键和粘贴操作 扩展上述代码，添加对退格键和粘贴操作的支持，使体验更完整。

const handleKeyDown = (index, e) => {
  if (e.key === 'Backspace' && !values[index] && index > 0) {
    inputRefs.current[index - 1].focus();
  }
};

const handlePaste = (e) => {
  e.preventDefault();
  const pasteData = e.clipboardData.getData('text').slice(0, length);
  const newValues = [...values];

  pasteData.split('').forEach((char, i) => {
    if (i < length) newValues[i] = char;
  });

  setValues(newValues);
  const lastFilledIndex = pasteData.length - 1;
  if (lastFilledIndex < length - 1) {
    inputRefs.current[lastFilledIndex + 1].focus();
  }
};

使用单个输入框模拟多输入框效果 如果偏好单个输入框的外观但需要分隔显示效果，可以使用CSS和值处理结合的方式。

const SingleInputPassword = ({ length = 4 }) => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value.slice(0, length);
    setValue(newValue);
  };

  return (
    <div style={{ display: 'flex' }}>
      {Array.from({ length }).map((_, i) => (
        <div 
          key={i}
          style={{
            width: '30px',
            height: '40px',
            border: '1px solid #ccc',
            margin: '5px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center'
          }}
        >
          {value[i] || ''}
        </div>
      ))}
      <input
        type="text"
        value={value}
        onChange={handleChange}
        style={{ opacity: 0, position: 'absolute' }}
        autoFocus
      />
    </div>
  );
};

验证和提交处理 无论采用哪种方法，最后都需要将分散的输入值合并为完整密码进行处理。

const handleSubmit = () => {
  const password = values.join('');
  console.log('Submitted password:', password);
  // 执行验证或其他逻辑
};

样式优化建议 为提升用户体验，可以添加以下CSS效果：

react如何按顺序输入密码框

当前聚焦的输入框高亮边框
输入完成后的视觉反馈
输入错误时的状态提示

.password-input {
  border: 2px solid #ddd;
  transition: border-color 0.3s;
}

.password-input:focus {
  border-color: #4a90e2;
  outline: none;
}

.password-input.filled {
  background-color: #f0f8ff;
}