html - 在 React Web 应用程序中单击文本框或文本区域时键盘消失

Question

我面临一个问题 - 当我单击文本字段时，屏幕键盘将弹出半秒钟然后自动关闭。我不明白是什么问题。

我试图删除我的整个代码并添加普通的 HTML 文本框，但仍然存在问题

这是我的反应代码

 <form className={style.form}>
    <div className={style.input_container}>
      <label className={style.form_label}>Email</label>
      <input
        className={classNames(
          style.input,
          errors.email && style.input_error
        )}
        placeholder="[e-mail]"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
        ref={register({
          required: "Required",
          pattern: {
            value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
            message: "Invalid",
          },
        })}
      />
      {errors.email && (
        <p className={style.error}>{errors.email.message}</p>
      )}
    </div>
    <div className={style.input_container}>
      <label className={style.form_label}>Zip code</label>
      <input
        className={classNames(style.input, errors.zip && style.input_error)}
        placeholder="00000"
        maxLength="5"
        type="text"
        name="zip"
        onChange={(e) => setZip(e.target.value)}
        ref={register({
          required: "Required",
          minLength: {
            value: 5,
            message: "Invalid (at least 5 characters)",
          },
          maxLength: {
            value: 5,
            message: "Invalid (5 characters only)",
          },
          pattern: {
            value: /^[0-9]*$/,
            message: "Invalid (numbers only)",
          },
        })}
      />
      {errors.zip && <p className={style.error}>{errors.zip.message}</p>}
    </div>
  </form>

标签： htmlcssreactjs