web-dev-qa-db-ja.com

ChromeオートフィルはGoogle Maps API v3のオートコンプリートをカバーします

次のように、Google Maps JavaScript v3を使用して、HTML入力フィールドでオートコンプリートを設定しています。

http://imgur.com/Rm6X2FI.png自動入力なし）

私が抱えている問題は、Chromeのオートフィルが次のようにマップのオートコンプリートを隠すことです。

---（http://imgur.com/7a2QM7L.png自動入力あり）

数か月前にオンラインで解決策を見つけました（参照：---（Disabling Chrome Autofill ））が、この解決策はもはや効果がないようです。

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

ChromeのオートフィルがGoogleマップのオートコンプリートリストの上部に表示されないようにする方法はありますか？

編集： Stop Google chrome自動入力 は私の現在の問題の解決策を提供しません。問題はChrome入力フィールドに自動入力値が自動的に入力されるのではなく、入力フィールドの自動入力ドロップダウン。

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

これも私を完全に狂わせていました。同じ問題があります。ユーザーが選択できるフィールド値をプルアップするためにスクリプトを使用しており、ブラウザーの自動機能がこれを台無しにしたくない。 Chromeは、バグ（最新バージョン42.0.2311.135 m）、Firefox（FF）のようです。

したがって、ブラウザの autocomplete およびChromeの autofill にも対応する必要があります。追加した場合：<form autocomplete = "off">を上部に配置すると、FFでオートコンプリートが停止し、ChromeですがChromeでのオートフィルではありません。「off」を「false」に変更しても何も起こりません。どちらのブラウザでも使用できます。FFの問題は解決されましたが、Chrome=の場合は、コンテンツの上に醜いオートフィルボックスが表示されるため、解決されません。

Autocomplete = "off"をフィールドのeachに個別に追加した場合、FFで機能しますが、この属性を持つ入力フィールドでは= Chromeはオフですが、オートフィルは依然として醜いヘッドを後退させます。

奇妙なことに、個々の入力フィールドの値を「オフ」から「false」に変更すると、Chrome upが揺れているように見え、フィールドでこれを次のように設定しています。 autocomplete = "false"の場合、autocompleteの値のみが表示され（以前にフィールドに入力されたものがある場合）、他のすべての入力フィールドには何も表示されません！この値をnoやxxなどに設定することもでき、オートコンプリートの無効な値に対してChrome barfsのように見え、フォームが奇妙に反応します。5つのフィールドがあり、3番目のフィールドにこれを設定すると、フィールド1、2、4、5は空白ですが、フィールド3はオートコンプリートを示しています。

これは、コピーして操作する例です（autocomplete属性を別のフィールドに移動して、それがどのように反応するかを確認してください）。

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

オートコンプリートとChromeのオートフィルの両方をオフにする私の解決策（非表示の入力フィールドを送信の下の上部または下部に配置できるはずです）。この<input autocomplete = "false" name = "hidden" type = "text" style = "display：none;">をコードに追加します。

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

結論：Chromeはautocomplete = offに準拠していますが、Chrome=の自動入力が問題です。これが役立つことを願っています。

20
Player 0001

上記の答えはどれもうまくいきませんでした（Chrome 64.0.3282.186、x64ウィンドウ）。

TL; DR： Googleマップのコードによりautocomplete属性がoffに変更されるため、new-passwordに設定しても、自動入力を取得します。私が使用しているハックは、その属性の変更をリッスンしてからオーバーライドすることです。注：Googleマップを呼び出した後で属性を変更するだけでは機能しません。

ミューテーションのリッスンをすぐに停止し、属性をnew-passwordに設定するGoogleマップオートコンプリートを初期化する前に、MutationObserverをセットアップします。

    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']
    });
51
Rimmel

jQueryソリューション：

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

[〜＃〜] gstar [〜＃〜] に感謝します。 Jqueryの代わりに、私は以下のコードを使用しました、そしてこれは私のために働きました

<input type="text" value="" id="address" class="form-control" placeholder="Enter a location" autocomplete="new-password" onfocus="this.setAttribute('autocomplete', 'new-password');">
6
Noor Muhammad

Elmuxの回答に関するコメントを引用するには https://stackoverflow.com/a/50927328/135057 上記：

Chrome 71の場合、コンソールから属性プレースホルダーを削除し、自動的に機能します。他の属性値を変更した場合も機能します。最後に、「アドレス」という用語の使用を避けますプレースホルダー属性内– Elmux

私（2018年12月30日、Chrome 71））は正しいですが、直感的ではありませんでした。

2
Philip Callender

googleマップイベント（ES6付き）...

new google.maps.places.Autocomplete(input);
google.maps.event.addDomListener(input, 'focus', e => e.target.setAttribute('autocomplete', 'new-password'));
1
Nick B

同じページにユーザー名とパスワードのフィールドがありました。

単純な未使用の<form></form>それらの周りで、これはオートコンプリートの問題を解決しました。

1
bendecko

私の場合、実行時に入力ボックスIDとフォームフィールド名の中央に文字列を挿入し、現在のユーザーセッションのセッションIDに置き換えました。セッションIDは、すべてのユーザーとセッションで誰でも一意に取得できる限り近くなります。

つまり、以前は "cust_address"と呼ばれていたフィールドが "cust_a734ohljehgto87y34hpwy9pho3ghseddress"になり、フィールドのIDが次のようになりました。

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

追加の予防策として、アドレスだけでなく他のフィールドでも機能するように見えるautocomplete = "new-password"を追加しましたが、それは時々機能するようであり、それが失敗または機能する原因はまだ解明されていません（まだ）...

ユーザーがフォームをリクエストすると、PHPの変数にフォームをロードし、％sessionid％のすべてのインスタンスを現在のユーザーセッションのセッションIDに置き換えて、ブラウザに出力します。

これまでのところ、これは魅力的に機能しましたが、私のシステムはまだベータテスト中であるため、Chromeによって監視される何千もの入力がありませんChromeロジックを理解して回避する-うまくいけば、彼らはこれらの修正を回避するのにあまり時間をかけないでください。特に、カレンダーの場所のAPIからのオートフィルで自動入力をオーバーライドするGOOGLES OWN SYSTEMをオーバーライドしているGOOGLES OWN SYSTEMを考慮してください。

0
David Crawford

ブラウザ-Chrome。

Google APIが添付されている入力の場合、フォーカスに属性オートコンプリートを設定します-

onfocus="this.setAttribute('autocomplete', 'new-password')"

他のフィールドでは、この属性を直接設定すると機能します-

autocomplete="new-password"

私にとっては、この値だけが機能しました。他の値と愚かな自動入力は混乱を引き起こします。

0
Ronn Wilder

回避策：

$('#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
<input id="autocomplete" autocomplete="nope" type="text" onFocus="this.setAttribute('autocomplete','nope'); geolocate();">
0
Brennan James

Chrome 69の場合、入力のプレースホルダーを変更することで、この問題を解決できました。

Googleプレイスオートコンプリートに関連付けられた2つの入力がありました。フィールドをクリックするとすぐに、オートフィルがオートコンプリートからの候補を表示しました。また、入力の「autocomplete」属性を「no-google-autofill」などのランダムなものに変更するようにリスナーを設定しました。 Chrome 69にアップグレードするまで、これはうまくいきました。

最終的には、入力のプレースホルダーを「Postcode」から「Area」に変更して修正しました。明らかに、プレースホルダーが原因で自動入力がトリガーされました。時々のChromeは自分の利益のためにあまりにもスマートにしようとします。

0
Daniel Nitu

自動入力を無効にする入力フィールドには、autocomplete = "new-password"を使用します。 Google Chrome意図的にautocomplete = "off | false"を無視しますが、 "new-password"に設定すると、自動入力は無視されます。

また、自動入力を処理するGoogle Places APIの方法を確認します。理想的には、これが実装のアプローチである必要があります。 https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform =

0
Adeesh Jain

場所のオートコンプリート<input>フィールドを<form>要素の外側に配置することで、Chrome自動入力オーバーレイを回避できます（Chrome 80.0 .3987.149）。

もちろん、HTMLの構造化とスタイリングに関して新しい問題が発生します。

<input name="street" type="hidden" />要素内に<input name="city" type="hidden" />や<form>などの入力フィールドを置き、ユーザーが<form>以外の場所のオートコンプリートウィジェットからアドレスを選択した後に入力することをお勧めします素子。

0
Taig

上記のソリューションはどれもChrome 78（autocomplete = "new-password"を含む）では機能しませんでしたが、これまでに機能している別のソリューションが見つかりました：

Googleマップのオートコンプリートを初期化する前にランダムなオートコンプリートを生成し（observerHackに関する@Rimmelの回答を参照して、Math.random（）で「new-password」を変更してください）、このタグを次の形式で追加します。

<input id="_suburb" type="text" style="display:none;" disabled>
0
Coudrak

Googleのアドレスファインダー からサンプルを試しましたが、同じ問題が発生しました。

enter image description here

更新された回答

新しいバージョンのchromeを使用する場合、必要なのは入力に_autocomplete="off"_を追加することだけです。

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

元の回答-回避策

これは、次のイベントを持つオートコンプリート入力です：onFocus="geolocate()"：

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

この行をgeolocateに追加して、オートコンプリートを非表示にしました。

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

    // other stuff
}
_
0
Hooman Bahreini

Angularjsを使用している人のために、私はChrome 66.0.3359.139。

(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

これは私を夢中にさせています。多くのことをテストした後、この動作を防ぐために私がしなければならなかったのは、chromeこれはアドレスです）にヒントを与えていません。

「住所」、「通り」などの言葉を使わずにユーザーフレンドリーにするのは簡単なことではありません。

プレースホルダーに「場所」という単語を使用してしまいます。オートコンプリートのような他の属性は使用していません。それがアドレスであることをどこにも言及しないでください。Chromeはこれを停止します。

これが他の人の役に立つことを願っています。

0
Robouste