安卓设备输入/删除OTP时键盘布局闪烁问题求助

以下是针对安卓设备输入/删除OTP时键盘闪烁问题的几种修复方案，可组合使用：

1. 替换自动聚焦逻辑，避免频繁DOM聚焦触发键盘闪烁 #

组件默认的shouldAutoFocus会在每次输入后自动切换聚焦输入框，在安卓WebView环境下容易引发键盘闪烁。改为手动控制初始聚焦，关闭自动聚焦：

import { useState, useRef, useEffect } from "react";
import OtpInput from "react-otp-input";

const OtpComponent = () => {
  const [OTP, setOTP] = useState("");
  const otpInputRef = useRef(null);

  useEffect(() => {
    // 组件挂载时仅聚焦第一个输入框
    if (otpInputRef.current) {
      const firstInput = otpInputRef.current.querySelector('input');
      firstInput?.focus();
    }
  }, []);

  const handleChange = (newOtp) => {
    setOTP(newOtp);
  };
  
  return (
    <div className="flex justify-center items-center h-screen">
      <OtpInput
        ref={otpInputRef}
        value={OTP}
        onChange={handleChange}
        numInputs={6}
        separator={<span className="p-1">-</span>}
        isInputNum={true}
        shouldAutoFocus={false} // 关闭自动聚焦
        inputStyle={{
          border: "1px solid gray",
          borderRadius: "8px",
          width: "54px",
          height: "54px",
          fontSize: "20px",
          color: "#000",
          fontWeight: "400",
          caretColor: "blue",
        }}
        focusStyle={{
          border: "1px solid black",
          outline: "none",
          width: "54px", // 保持和inputStyle一致的尺寸，避免布局偏移
          height: "54px"
        }}
      />
    </div>
  );
};

export default OtpComponent;

2. 使用Tel类型输入框，优化安卓键盘兼容性 #

将输入框类型改为tel，比number类型更适配OTP场景，安卓系统对tel键盘的渲染更稳定：

// 自定义输入框组件，用React.memo减少不必要重渲染
const CustomInput = React.memo((props) => {
  return <input {...props} type="tel" />;
});

// 在OtpInput中引用自定义组件
<OtpInput
  // ...其他属性
  inputComponent={CustomInput}
/>

3. 固定页面视口，防止输入时页面缩放 #

在项目的HTML入口文件中，添加或更新视口meta标签，避免安卓WebView因输入触发页面缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

内容的提问来源于stack exchange，提问作者Govind Saini