web-dev-qa-db-fra.com

Chrome Autofill couvre la saisie semi-automatique pour Google Maps API v3

J'utilise Google Maps Javascript v3 pour configurer la saisie semi-automatique sur un champ de saisie HTML comme suit:

http://imgur.com/Rm6X2FI.png - (sans remplissage automatique)

Le problème que je rencontre est que le remplissage automatique de Chrome recouvre la saisie semi-automatique de Google Maps de la manière suivante:

http://imgur.com/7a2QM7L.png - (w/autofill)

J'ai trouvé une solution en ligne il y a quelques mois (ref: Désactivation de Chrome Autofill ), mais il semble que cette solution n'ait plus aucun effet.

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />

Puis-je empêcher le remplissage automatique de Chrome de s'afficher en haut de la liste de saisie semi-automatique de Google Maps?

EDIT: Arrêter la saisie automatique de Google Chrome ne fournit pas de solution à mon problème actuel. Le problème vient de la liste déroulante Remplissage automatique de Chrome dans le champ de saisie, et non du fait que le champ de saisie soit automatiquement rempli avec une valeur de remplissage automatique.

htmlgoogle-mapsgoogle-chromegoogle-maps-api-3
25
Cole Waldrip

Cela me rendait totalement fou aussi. Avoir le même problème. Nous utilisons des scripts pour extraire les valeurs de champ pouvant être choisies par un utilisateur et ne souhaitons PAS que le navigateur automatique du navigateur gâche tout cela. Chrome semble être le bougre (dernière version 42.0.2311.135 m), Firefox (FF) avec lequel nous pouvons travailler. 

Nous devons donc également traiter le saisie semi-automatique ET le navigateur remplissage automatique du navigateur. Si j'ajoute: <form autocomplete = "off"> en haut, la saisie semi-automatique dans FF et Chrome est stoppée, mais pas AUTOFILL dans Chrome. Changer 'off' en 'false' ne fait rien pour les deux navigateurs. Résolution du problème FF mais pas de Chrome car il montre la boîte AUTOFILL moche sur le contenu.

Si vous ajoutez autocomplete = "off" à each des champs individuellement, cela fonctionne à nouveau dans FF, mais pour les champs de saisie dotés de cet attribut autocomplete dans Chrome, cette fonction est désactivée, mais la fonction de remplissage automatique continue à afficher sa tête. 

Ce qui est étrange, c’est que si vous modifiez la valeur du champ de saisie individuel de "off" à "false", cela semble secouer Chrome et pour le champ que vous avez réglé sur autocomplete = "false", vous voyez UNIQUEMENT les valeurs autocomplete (si quelque chose a été entré dans le champ auparavant) et tous les autres champs d'entrée ne montrent rien! Vous pouvez également définir cette valeur sur no ou xx ou autre et ressemble à Chrome barfs sur la valeur non valide pour la saisie semi-automatique et le formulaire réagit étrangement. Si vous avez 5 champs et que vous définissez ceci pour le troisième champ, les champs 1, 2, 4 et 5 sont vides, mais le champ 3 indique la saisie semi-automatique. 

Voici un exemple à copier et à manipuler (essayez de déplacer l'attribut autocomplete vers différents champs et de voir comment il réagit):

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input autocomplete="false" name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

Ma solution pour désactiver à la fois l'auto-complétion et de Chrome (vous devriez pouvoir placer le champ de saisie masqué en haut ou en bas en dessous de l'envoi). Ajoutez cette <input autocomplete = "false" name = "hidden" type = "text" style = "display: none;"> au code:

<!DOCTYPE html>
<html>

<head>
  <title>Signup</title>
</head>

<body>
  <form autocomplete="off" method="post">
    <input autocomplete="false" name="hidden" type="text" style="display:none;">
    <br />First name:
    <input name="Firstname" type="text">
    <br />Last name:
    <input name="Lastname" type="text" style="width: 124px">
    <br />Address:
    <input name="Address" type="text" style="width: 383px">
    <br />Phone number:
    <input name="Phone" type="text">
    <br />E-mail:
    <input name="Email" type="text" style="width: 151px">
    <br />
    <input type="submit">
  </form>
</body>

</html>

En bout de ligne: Chrome adhère à l'auto-complétion = off mais le remplissage automatique de Chrome est le problème. J'espère que cela t'aides.

16
Player 0001

Aucune des réponses ci-dessus n'a fonctionné pour moi (Chrome 64.0.3282.186, x64 windows). 

TL; DR: Le code de Google Maps remplace l'attribut autocomplete en off. Ainsi, même si vous le définissez sur new-password, vous obtiendrez toujours le remplissage automatique. Le hack que j'utilise consiste à écouter les mutations sur cet attribut, puis à le remplacer. Remarque: le simple changement d'attribut après avoir appelé Google Maps ne fonctionne pas.

Configurez un MutationObserver avant d’initialiser la complétion automatique de Google Maps qui arrête immédiatement l’écoute des mutations, puis définit l’attribut sur new-password.

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });
32
Rimmel

solution jQuery:

$('#address').focus(function() {
    $(this).attr('autocomplete', 'new-password');
});
2
GSTAR

Pour moi, j'ai inséré une chaîne au moment de l'exécution au milieu de l'ID de la zone de saisie et du nom du champ de formulaire remplacés par l'ID de la session de l'utilisateur en cours. L'identifiant de session est aussi proche que possible et unique pour chaque utilisateur et session.

En bref, ce qui était auparavant un champ appelé "cust_address" est devenu "cust_a734ohljehgto87y34hpwy9pho3ghseddress", ainsi que l'ID du champ Mon code de zone de saisie a ressemblé à ceci:

'<input type=text name="cust_a%sessionid%ddress" id="cust_a%sessionid%ddress" value="" autocomplete="new-password">'

Pour des précautions supplémentaires, j'ai ajouté le code autocomplete = "new-password" qui semble fonctionner pour d'autres champs, mais pas l'adresse, bien qu'il semble fonctionner à l'occasion et que je n'ai pas trouvé la cause de son échec ou de son fonctionnement (pour le moment) ...

Lorsque mon utilisateur demande le formulaire, je le charge dans une variable dans PHP et je remplace toutes les instances de% sessionid% par l'ID de session de la session d'utilisateur en cours, puis je le renvoie dans le navigateur.

Jusqu'ici, cela a fonctionné à merveille, mais mon système est toujours en phase de test bêta. Chrome n'a donc pas surveillé des milliers d'entrées pour permettre à Chrome de comprendre la logique et de la contourner. Espérons qu'ils ne passent pas trop de temps à contourner. ces corrections, en particulier si l'on considère que c'est GOOGLES OWN SYSTEM qui annule GOOGLES OWN SYSTEM avec la saisie semi-automatique remplaçant l'auto-remplissage à partir de l'API Places du calendrier!

0
Dogman

Solution de contournement:

$('#Name').on('mouseup keyup', function () {
        var val = $('#Name').val();
        val = val.length;
        if (val === 0) {
            $('#Name').attr('autocomplete', 'on');
        }
        else {
            $('#Name').attr('autocomplete', 'new-password');
        }
    }).on('mousedown keydown', function () {
        var val = $('#Name').val();
        var length = val.length;
        if (!length) {
            $('#Name').attr('autocomplete', 'new-password');
        }
    })
0
code passionate

J'ai réussi à résoudre ce problème pour Chrome 69 en modifiant l'espace réservé de l'entrée.

J'ai eu 2 entrées liées à Google Places Autocomplete. Dès que vous avez cliqué sur le champ, le remplissage automatique est apparu, couvrant les suggestions de la saisie semi-automatique. J'avais également un auditeur configuré pour changer l'attribut "autocomplete" de l'entrée en quelque chose de aléatoire, comme "no-google-autofill". Cela a bien fonctionné jusqu'à ce que je passe à Chrome 69.

Finalement, je l'ai corrigé en modifiant le paramètre fictif de l'entrée de «Code postal» en «Zone». Apparemment, la fonction de remplissage automatique s'est déclenchée à cause de l'espace réservé. Parfois, Chrome essaie d'être trop intelligent pour son propre bien.

0
Daniel N.

Utilisez autocomplete = "new-password" pour le champ de saisie pour lequel vous souhaitez que le remplissage automatique soit désactivé. Google Chrome ignore intentionnellement autocomplete = "off | false", mais si vous définissez "nouveau mot de passe", il ignore le remplissage automatique. 

Vérifiez également la manière dont l'API Google Adresses gère le remplissage automatique. Idéalement, cette approche devrait être la mise en œuvre suivante: Https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete- adresse

0
Adeesh Jain

Pour citer le commentaire d'Elmux sur la réponse https://stackoverflow.com/a/50927328/1350573 ci-dessus:

Avec Chrome 71, j'ai supprimé l'attribut fictif d'attribut de la console, Et cela fonctionne automatiquement. Si je change la valeur d'attribut pour Autre chose, cela fonctionne aussi. Enfin, évitez d'utiliser le terme 'Adresse' Dans l'attribut d'espace réservé. - Elmux

Pour moi (30 décembre 2018, Chrome 71), c'était la réponse correcte, mais non intuitive.

0
Philip Callender

J'ai essayé l'échantillon de Address Finder de Google , et j'ai eu le même problème:

 enter image description here

Réponse mise à jour

Avec la nouvelle version de chrome _, tout ce dont vous avez besoin est d’ajouter: autocomplete="off" à votre entrée:

<input id="autocomplete" autocomplete="off" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

Réponse originale - Solution de contournement

C'est l'entrée automcomplete, qui a l'événement: onFocus="geolocate()":

<input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"/>

J'ai ajouté cette ligne pour géolocaliser, pour masquer la saisie semi-automatique:

function geolocate() {
    // add this line to hide the autocomplete
    $("#autocomplete").attr("autocomplete", "new-password");

    // other stuff
}
0
Hooman Bahreini

Pour ceux qui utilisent Angularjs, j'ai créé une directive basée sur @Rimmel answer qui fonctionne pour moi dans Chrome 66.0.3359.139. Ci-dessous le code:

(function(){
  'use strict'; 
  angular.module('app.directive')
    .directive('stopAutofill', stopAutofillDirective);

  function stopAutofillDirective() {
      return {
        restrict: 'A',
        link: function (scope, element) {
            var observerHack = new MutationObserver(function () {
                observerHack.disconnect();
                element.attr("autocomplete", "new-password");
            });

            observerHack.observe(element[0], {
                attributes: true,
                attributeFilter: ['autocomplete']
            });
        }
      };
    };
})();
0
Yoan Pumar