react-otp-input组件问题：移动端保持数字键盘且显示星号

要实现移动端保持数字键盘+输入框显示星号，只需调整两处关键配置，修改后的完整代码如下：

<OtpInput
  value={otpCode}
  onChange={setOtpCode}
  numInputs={6}
  // 改为password类型，让输入内容显示为*
  inputType="password"
  renderSeparator={
    <span
      style={{
        fontSize: "7px",
        marginLeft: "5px",
        marginRight: "5px",
      }}
    >
      {" "}
    </span>
  }
  // 添加inputMode="tel"，确保移动端唤起数字键盘
  renderInput={(props) => <input {...props} inputMode="tel" />}
  inputStyle={{
    width: "30px",
    marginBottom: "10px",
    height: "30px",
    borderTop: "none",
    borderLeft: "none",
    borderRight: "none",
    backgroundColor: "transparent",
    outline: "none",
  }}
/>

核心修改说明： #

• inputType="password"：让每个OTP输入框自动将输入内容替换为星号（*），实现掩码显示效果。
• inputMode="tel"：强制移动端浏览器唤起纯数字键盘，即使输入框类型是password，依然保持数字输入的键盘体验，不会切换为字母数字混合键盘。

如果部分设备对inputMode="tel"兼容不佳，可尝试替换为inputMode="numeric"，同样能达到唤起数字键盘的效果。

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