Problemy z urządzeniami IOS z wprowadzaniem danych w formacie HTML (typ = tekst)

Question

Mam więc formularz logowania HTML z dwoma polami: E-mail i hasło. Można je łatwo wypełnić w przeglądarce dowolnego urządzenia innego niż urządzenia IOS (iPhone, iPad). Na polach IOS prawie nie można ustawić ostrości, a gdy ostrość zostanie ustawiona, klawiatura wyskoczy, zaczynam pisać, ale nic nie jest faktycznie wypełniane. Próbowałem zarówno w przeglądarce Chrome, jak i safari, i nadal uzyskuję ten sam rezultat. Pole pozostaje czarne. Poniżej znajduje się sposób formatowania mojego formularza:

<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> 

Próbowałem dodać atrybut automatycznego ustawiania ostrości, ustawić wartość i zachować tę samą wartość.

Answer 1

Znaleźliśmy problem, to reset arkusza stylów Znalazłem online, aby pomóc w zachowaniu urządzeń dotykowych, gdy użytkownik dotknie/przytrzyma element i skopiowałem go przez większość moich projektów. Jeśli masz ten problem, najprawdopodobniej masz te linie w swoim kodzie:

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

Po prostu usuń lub ustaw domyślnie. A jeśli twoim zamiarem jest, aby powstrzymać ludzi od wybierając materiał na swojej stronie internetowej, a następnie upewnij się, że ta właściwość stylu zresetować domyślne na wejść

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