12
votes

Chrome (mais pas firefox) automatique se chevauche du texte de label malgré jQuery

J'ai fait une forme de connexion qui contient les étiquettes pour "nom d'utilisateur" et "mot de passe", avec la jQuery ci-dessous utilisé pour masquer les étiquettes une fois que l'utilisateur se concentre sur le champ.

<form method="post" id="login-form" action="/accounts/login/">
    <div class="input-wrapper">
        <label for="id_username">Username</label>
        <input id="id_username" size="30" type="text" name="username">
    </div>
</form>


2 commentaires

Avez-vous essayé d'éteindre l'autocomplete pour la zone de texte? Beaucoup de gens ont des problèmes avec un autocomplete et il a été demandé auparavant. Vérifiez cette question pour comment le faire. Stackoverflow.com/Questions/2530/...


Je crois comprendre que cela résoudrait mon problème, mais j'aime bien l'autocomplete en théorie et j'aimerais que les gens puissent l'utiliser pour prépopuler leur nom d'utilisateur et leur mot de passe. Donc, le pire des cas, je peux en effet le faire, mais je préférerais trouver une solution qui me permet de garder l'autocomplete et de cacher les étiquettes.


5 Réponses :


6
votes

Chrome (et, de manière équivalente, la mise à l'autofill de Google Toolbar sur d'autres navigateurs) est un mauvais citoyen du Web avec son comportement de remplissage de forme. Lorsqu'il remplit les champs de formulaire, il ne tire pas les événements normaux. Si vous ne souhaitez pas désactiver Autofill, vous pouvez configurer un événement chronométré qui vérifie périodiquement pour voir si Autofill s'est produite.

La première réponse (par l'orchestre de la question) de Ceci donc question est un exemple de solution.


0 commentaires

7
votes

Après avoir lu Benjamin Miles Tutoriel J'ai remarqué que vous pouvez détecter les chromes Autofill avec jQuery comme: xxx

Notez que vous devez placer le code dans $ (fenêtre) .charger (Function (Function). {});

et non xxx


0 commentaires

0
votes

Vous pouvez également utiliser ce qui suit

var wait = window.setTimeout( function(){
//Pseduo code
label.style.display = "none";
},5);


0 commentaires

0
votes

INPUT: -WebKit-Autofill Ajouter des styles requis pour -WebKit-Autofill Propriétés pour corriger le problème de chevauchement.


0 commentaires

2
votes

Vous pouvez essayer d'injecter un attribut d'espace réservé de contrôleur comme celui-ci xxx


0 commentaires