Блог

У меня есть модальное окно, которое открывается, когда пользователь нажимает кнопку. В этом модальном окне есть <input type="text" /> компонент.

При монтировании модального окна мобильная клавиатура открывается автоматически, и фокус устанавливается на этот единственный ввод.

Я включаю и отключаю атрибут html только для чтения или отключен, но это вынуждает пользователя дважды щелкнуть или трижды щелкнуть по вводу, чтобы мобильная клавиатура была видна.

Как я могу запретить открытие мобильной клавиатуры при монтировании ввода и как мне отобразить мобильную клавиатуру, когда пользователи одним щелчком мыши нажимают на этот компонент ввода?

Приведенный ниже код — это то, что у меня есть прямо сейчас, он заставляет пользователей мобильных устройств дважды щелкнуть по компоненту ввода, чтобы отобразить клавиатуру. Двойной щелчок не удобен для пользователя, поскольку он перемещает положение прокрутки или отображает всплывающую подсказку «Выбрать все», «Копировать», «Вставить» и т.д. Для мобильных устройств вместо отображения мобильной клавиатуры.

 <input
  type="text"
  readonly={this.state.isInputReadOnly}
  onClick={this.onInputClick}
  onChange={this.onInputChange}
  value={this.state.inputValue}
/>
  

Когда открывается modal, вместо того, чтобы фокусироваться на вводе, сосредоточьтесь на каком-нибудь другом элементе modal, скажем, на каком-нибудь элементе span.. Это должно предотвратить открытие клавиатуры.