web-dev-qa-db-fra.com

IOS problèmes de périphériques avec la saisie du formulaire HTML (type = texte)

J'ai donc un formulaire de connexion HTML avec deux champs: Email et Mot de passe. Ceux-ci peuvent être remplis facilement sur le navigateur de n'importe quel appareil autre que IOS appareils (iPhone, iPad). Sur IOS les champs peuvent difficilement être mis au point et une fois au point, le clavier apparaît, je commence à taper mais rien n'est réellement rempli. J'ai essayé les deux Chrome et safari et j'obtiens toujours le même résultat. Le champ reste noir. Ci-dessous, comment mon formulaire est formaté :

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

J'ai essayé d'ajouter un attribut de mise au point automatique, de prédéfinir une valeur et toujours la même.

htmliosiphoneformsinput
16
webicy

J'ai trouvé le problème, c'est une réinitialisation de feuille de style que j'ai trouvée en ligne pour aider avec le comportement des appareils tactiles lorsque l'utilisateur touche/maintient un élément et je l'ai copié dans la plupart de mes projets. Donc, si vous avez ce problème, il est fort probable que vous ayez ces lignes dans votre CSS:

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

Il suffit donc de le supprimer ou de le définir par défaut. Et si votre intention est d'empêcher les gens de sélectionner des éléments sur votre site Web, assurez-vous de réinitialiser cette propriété de style par défaut sur entrées

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

Dans mon cas, le problème était avec le paquet de matériaux angulaires, version 1.1.2. Après la mise à jour (1.1.18), tout fonctionne comme prévu.

0
plascode