Фокус поля ввода на мобильном телефоне не фокусируется на постукивающем вводе - PullRequest
Новая
       10

Фокус поля ввода на мобильном телефоне не фокусируется на постукивающем вводе

0 голосов
/ 05 ноября 2018

Контрольное изображение: скриншот телефона с описательными стрелками

Проблема : у меня есть форма с 4 полями ввода и текстовой областью. На мобильных устройствах, если я коснусь какого-либо из полей ввода, «фокус» переместится в самое верхнее поле (поле имени). Можно получить доступ к другим полям ввода из самого верхнего поля, используя стрелки, которые появляются на клавиатуре. Однако я волнуюсь, что это не будет интуитивно понятно для наиболее вероятной аудитории.

Вопрос : Мне интересно, есть ли способ отключить это поведение? Или, по крайней мере, сделать так, чтобы поле ввода касалось поля ввода клавиатуры? Спасибо за любые попытки:)

Примечание: я использовал Iphone, когда проверил это. На сайте используются медиазапросы, но это самая маленькая ширина, поэтому я не верю, что что-то из того, что я сделал, будет мешать.

HTML (React - JSX): 

<form className="contact-message-form" onSubmit={this.handleSubmit}>
  <label>
    <input type="text" name="name" value={.} onChange={.} placeholder="Name"/><br/>
    <input type="text" .../><br/>
    <input type="text" ..."/><br/>
    <input type="text" ..."/><br/>
    <textarea cols={.} rows={.} spellcheck="true" className="message" name="message"  value={.} onChange={.} placeholder="Message..."/>
  </label>
  <br/>
  <input type="submit" value="Send Message" disabled={this.state.pressed}/>
</form>

CSS: 

.contact-message-form > label > input:not(:last-child) {
  width: 50%;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 2px;
  text-align: center;
  font: 400 18px/1.8 "Lato", sans-serif;}

.message {
  width: 80%;
  height: 200px;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  padding-top: 2px;
  padding-bottom: 2px;
  margin: 2px;
  text-align: center;
  font: 400 18px/1.8 "Lato", sans-serif;
  text-overflow: ellipsis;}
...