Устройства IOS выходят с вводом формы HTML (type = text)

Итак, у меня есть форма для входа в систему с двумя полями: Email и Пароль. Они могут быть легко заполнены на любом браузере устройств, отличном от устройств IOS (iPhone, iPad). На IOS-полях вряд ли можно сосредоточиться и один раз в фокусе, клавиатура всплывает, я начинаю вводить текст, но на самом деле ничего не заполняется. Я пробовал как в Chrome, так и в сафари, но получаю тот же результат. Поле остается черным. Ниже приведена форма моей формы:

<form method="post" name="login" action="login">
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="email"></label>
      <input type="text" name="email" placeholder="Enter your email address" class="formInput"/>
   </div>
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="password"></label>
      <input type="password" name="password" class="formInput"/>
    </div>
    <button class="blue centeredContent">Login</button>
</form>

Я попробовал добавить атрибут автофокуса, задал значение и все тот же.

Ответ 1

Нашел проблему, это таблица стилей reset, которую я нашел в Интернете, чтобы помочь с поведением сенсорных устройств, когда пользователь нажимает/удерживает элемент, и я копировал его в большинстве своих проектов. Поэтому, если у вас есть эта проблема, скорее всего, у вас есть эти строки в вашем css:

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }

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

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     }

Ответ 2

В моем случае проблема была с пакетом angular-material версии 1.1.2. После обновления (1.1.18) все работает как положено.