web-dev-qa-db-fra.com

Comment désactiver Chrome pour remplir automatiquement le nom d'utilisateur/mot de passe de l'e-mail?

Je sais que sa réponse a été donnée à plusieurs reprises sur SO, mais que cela concerne les anciennes versions de Chrome.

J'ai Chrome Version 53.0.2785.143.

Je veux désactiver Chrome pour remplir automatiquement les champs de mot de passe,

J'ai essayé toutes les méthodes mentionnées dans les réponses plus anciennes SO, 

Méthode 1:

J'ai essayé d'utiliser de faux mots de passe d'utilisateur.

<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Méthode 2:

Essayé d'utiliser autocomplete='new-password' et autocomplete='false' et autocomplete='off'

Mais rien ne fonctionne.

htmlhtml5google-chrome
13
Umair

Essayez ceci display:none 

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Vous pouvez aussi utiliser jQuery pour résoudre ce problème, en espérant que cela vous aidera, sinon mettez un commentaire ici, bonne chance :)

Mettre à jour:

Cela dépend de la version de chrome, parfois cela ne fonctionnera pas pour les nouvelles versions de chrome, vous devriez donc essayer beaucoup de choses pour éviter ce problème, essayez également ces extraits de code et mettez un commentaire sur ce qui est arrivé :)

Solution 2 

$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });

Il supprime les attributs "name" et "id" des éléments et les assigne après 1ms. Mettez ceci dans le document préparez-vous.

Solution 3 

<input type="text" name="email">
<input type="password" name="password" autocomplete="new-password">

Testé et fonctionne sous Chrome 53 

Solution 4

essayez autocomplete="false" au lieu de autocomplete="off" ou nofill

13
Sachith
  1. Ajoutez un attribut autocomplete avec une valeur de nom d'utilisateur pour les noms d'utilisateur.
  2. Si vous avez implémenté un flux de connexion "email premier" séparant le nom d'utilisateur et le mot de passe en deux formulaires distincts, incluez un champ de formulaire contenant le nom d'utilisateur dans le formulaire utilisé pour collecter le mot de passe. Vous pouvez bien sûr masquer ce champ via CSS si cela convient à votre mise en page.
  3. Ajoutez un attribut autocomplete avec une valeur de current-password pour le champ mot de passe d'un formulaire de connexion.
  4. Ajoutez un attribut autocomplete avec la valeur new-password pour le champ mot de passe dans les formulaires d'inscription et de modification du mot de passe.

  5. Si vous demandez à l'utilisateur de saisir son mot de passe deux fois lors de l'inscription ou de la mise à jour du mot de passe, ajoutez l'attribut new-password autocomplete dans les deux champs.

    <input type="text" autocomplete="username">
<input type="password" autocomplete="current-password">
2
Jeevanantham Dharma

Chrome ne remplira automatiquement un mot de passe que si vous saisissez type="password"; sinon, vous risqueriez d'exposer le mot de passe de l'utilisateur en texte brut. Utilisez donc type="text" dans le champ de saisie, puis modifiez l'attribut type en "password" lorsque l'utilisateur se concentre sur l'entrée.

Champ Mot de passe: 

<input type="text" class="form-control" placeholder="Password"
    onfocus="this.setAttribute('type', 'password')" />

Exemple complet: (En utilisant les classes Bootstrap 3 et les icônes Font Awesome)

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Email Address" />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Password" 
            onfocus="this.setAttribute('type', 'password')" />
    </div>
    <div class="text-xs-center">
        <button type="submit" class="btn btn-primary" style="width: 100%;">
            <i class="fa fa-lock" style="padding-right: 10px;"></i> LOG IN
        </button>
    </div>
</form>
1
Kurtis Welch

Utiliser le plugin jQuery disableAutoFill

$('#login-form').disableAutoFill();

Document: https://github.com/terrylinooo/jquery.disableAutoFill

Démo: https://terrylinooo.github.io/jquery.disableAutoFill/

0
Terry Lin

Une solution potentielle pourrait être de définir initialement le type d'entrée sur "text", puis d'ajouter un écouteur d'événements pour l'entrée qui met à jour le type en "mot de passe" une fois le champ modifié. Cela vous permettrait de conserver toutes les fonctionnalités d'une saisie de mot de passe et d'éviter les remplissages/gestionnaires de mots de passe. Quelque chose comme:

HTML

<input type='text' class='my-input' />

JS

const input = document.querySelector('.my-input');

input.addEventListener('keydown', () => {
    input.setAttribute('type', 'password');
});
0
wesleysmyth

Dans un scénario où l'administrateur souhaite modifier l'adresse électronique/le mot de passe de l'utilisateur, la saisie automatique a remplacé l'adresse électronique de l'utilisateur par le mot de passe de l'administrateur et renseigné. 

Ce qui a fonctionné pour moi a été de définir les champs (email, mot de passe ...) sur désactivé et de les activer avec un délai d'une seconde après le chargement de la page. De cette manière, ils deviennent disponibles pour l'utilisateur après que le remplissage automatique du navigateur les a ignorés. 

Le risque est que quelque chose casse les js et qu'ils restent indisponibles.

Si votre partie serveur ne dépend pas beaucoup des noms d'entrée, je vous recommande simplement de les changer pour les différencier de ceux utilisés dans le formulaire de connexion - ils ne seront pas automatiquement renseignés (sauf si vous le demandez spécifiquement).  

Sinon, voici l'exemple de code:

 <input id="email" type="email" name="email" value="[email protected]" disabled>
    <input id="password" type="password" name="password" disabled>

    <script>
    $(document).ready(function(){
         setTimeout(
            function(){
                $('#myform input[diabled]').removeAttr('disabled');
            }, 1000);
    );
    </script>
0
Ivan Pavlov