web-dev-qa-db-ja.com

Chromeはautocomplete = "off"を無視します

タグボックスドロップダウンを使用するWebアプリケーションを作成しました。これはChromeブラウザ（バージョン21.0.1180.89）を除くすべてのブラウザでうまく機能します。

inputフィールドとformフィールドの両方がautocomplete="off"属性を持っているにもかかわらず、Chromeはそのフィールドの以前のエントリのドロップダウン履歴を表示することを主張しています。

htmlgoogle-chromeautocompletehtml-form
349
Mr Fett

_アップデート_

Chromeはstyle="display: none;"またはstyle="visibility: hidden;属性を無視するようになりました。

次のように変更することができます。

<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">

私の経験では、Chromeは最初の<input type="password">と前の<input>のみを自動補完します。だから私は追加しました：

<input style="display:none">
<input type="password" style="display:none">

<form>の先頭へ、ケースは解決されました。

298
Diogo Cid

ユーザー名（または電子メール）とパスワードの自動補完を防ぐ：

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

フィールドのオートコンプリートを防止します（ は機能しない可能性があります ）。

<input type="text" name="field" autocomplete="nope">

説明：

autocompleteは<input>を持っていてもautocomplete="off"上で動作しますが、offをnopeのようにランダムな文字列に変更することができます。

その他 "solutions" フィールドのオートコンプリートを無効にするためのものです（正しい方法ではありませんが、うまくいきます）。

1。

HTML： 

<input type="password" id="some_id" autocomplete="new-password">

JS（オンロード）： 

(function() {
    var some_id = document.getElementById('some_id');
    some_id.type = 'text';
    some_id.removeAttribute('autocomplete');
})();

または jQueryを使用する： 

$(document).ready(function() {
    var some_id = $('#some_id');
    some_id.prop('type', 'text');
    some_id.removeAttr('autocomplete');
});

2。

HTML： 

<form id="form"></form>

JS（オンロード）： 

(function() {
    var input = document.createElement('INPUT');
    input.type = 'text';
    document.getElementById('form').appendChild(input);
})();

または jQueryを使用する： 

$(document).ready(function() {
    $('<input>', {
        type: 'text'
    }).appendTo($('#form'));
});

JQueryを使って複数のフィールドを追加するには：

function addField(label) {
  var div = $('<div>');
  var input = $('<input>', {
    type: 'text'
  });
  
  if(label) {
    var label = $('<label>', {
      text: label
    });
    
    label.append(input);
    div.append(label);    
  } else {
    div.append(input);    
  }  
  
  div.appendTo($('#form'));
}

$(document).ready(function() {
  addField();
  addField('Field 1: ');  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>

で動作します。

  • Chrome：49+

  • Firefox：44以上

213
Cava

autocomplete="off"タグがない限り、Chromeは<form autocomplete="off">を無視するようになりました。

129
ice cream

信頼できる回避策として、このコードをレイアウトページに追加することができます。

<div style="display: none;">
 <input type="text" id="PreventChromeAutocomplete" 
  name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Chromeは、他のオートコンプリート値を持つフォームに他の入力要素が少なくとも1つある場合にのみ、autocomplete = offを尊重します。

これはパスワードフィールドでは動作しません - それらはChromeでは非常に異なって処理されます。詳しくは https://code.google.com/p/chromium/issues/detail?id=468153 をご覧ください。

最新情報：2016年3月11日、Chromium Teamによるバグ修正 "Won't Fix"。クローズのコメント（ 最初に提出されたバグレポート ）。 TL; DR：Chromeが自動入力を実行しないようにするには、autocomplete = "new-street-address"などの意味上の自動補完属性を使用します。

69
J.T. Taylor

現代のアプローチ

単にあなたの入力をreadonlyにして、焦点を合わせて、それを削除してください。これは非常に単純なアプローチであり、ブラウザはreadonly入力を移入しません。したがって、この方法は受け入れられており、将来のブラウザアップデートで上書きされることは決してありません。

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

次の部分はオプションです。それがreadonly入力のように見えないようにそれに応じてあなたの入力をスタイルしてください。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

作業例

49
Fizzix

Chromeバージョン34ではautocomplete=offを無視するようになりました/ こちらを参照 /.

たくさんの議論 これが良いことなのか悪いことなのか。あなたの意見は？

32
Peter Kerr

さて、パーティーには少し遅れましたが、autocompleteがどのように動くべきかどうかについて少し誤解があるようです。 HTMLの仕様によると、ユーザーエージェント（この場合はChrome）はautocompleteをオーバーライドできます。

https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute

ユーザーエージェントは、ユーザーが要素のオートフィルフィールド名を上書きすることを許可します。ページ作成者の反対にもかかわらず値を記憶して事前に入力できるようにするために "off"から "on"に変更するか、常に値を記憶しないで "off"にします。ただし、サイトの設定にかかわらず、すべての値が常に記憶されている場合はユーザーにとってセキュリティ上重大な意味があるため、ユーザーエージェントはユーザーが自動入力フィールド名を "off"から "on"または他の値に変更することを許可しないでください。

そのため、Chromeの場合、開発者は基本的に「これをユーザーに任せて、autocompleteを機能させるかどうかを決定するようにします。望まない場合は、ブラウザで有効にしないでください。 ".

しかし、これは私の好みのために彼らの側に少し過度に熱心であるように見えますが、それはそうです。この仕様では、このような動きが潜在的なセキュリティに与える影響についても説明しています。

"off"キーワードは、コントロールの入力データが特に機密であることを示します（例えば、核兵器の活性化コード）。あるいは、それは決して再利用されない値であり（例えば、銀行のログインのためのワンタイムキー）、したがってユーザは事前入力のためにUAに頼ることができる代わりに毎回明示的にデータを入力しなければならないでしょう。彼にとっての価値あるいは、文書が独自のオートコンプリートメカニズムを提供し、ユーザーエージェントにオートコンプリート値を提供させたくない場合。

だから他のみんなと同じような欲求不満を経験した後、私は私のために働く解決策を見つけた。それはautocomplete="false"の回答と似ています。

Mozillaの記事がまさにこの問題について述べています。

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

場合によっては、autocomplete属性がoffに設定されていても、ブラウザは自動補完値を提案し続けます。この予想外の振る舞いは開発者にとってかなり戸惑うことがあります。本当に補完しないことを強制するトリックは、属性にランダムな文字列を割り当てることです。

したがって、次のコードshouldが機能します。

autocomplete="nope"

そして以下の各項目も同様です。

autocomplete="false"
autocomplete="foo"
autocomplete="bar"

私が見ている問題は、ブラウザエージェントがautocomplete属性を学び、次にフォームを見たときにそれを適用するのに十分スマートであるかもしれないということです。これを行う場合、問題を回避するために私が見ることができる唯一の方法は、ページが生成されたときにautocomplete属性値を動的に変更することです。

言及する価値がある1つのポイントは、多くのブラウザがログインフィールド（ユーザー名とパスワード）のautocomplete設定を無視するということです。 Mozillaの記事にあるように：

このため、最近のブラウザの多くはログインフィールドに対してautocomplete = "off"をサポートしていません。

  • サイトがフォームにautocomplete = "off"を設定し、フォームにユーザー名とパスワードの入力フィールドが含まれている場合でも、ブラウザはこのログインを記憶するよう提案し、ユーザーが同意するとブラウザは次回これらのフィールドを自動入力します。ユーザーはこのページにアクセスします。
  • ユーザー名とパスワードの入力フィールドにサイトがautocomplete = "off"を設定した場合でも、ブラウザはこのログインを記憶するよう提案し、ユーザーが同意すると、ユーザーが次にこのページにアクセスしたときにブラウザはこれらのフィールドを自動入力します。

これはFirefox（バージョン38以降）、Google Chrome（34以降）、およびInternet Explorer（バージョン11以降）の動作です。

最後に、属性がform要素に属しているのかinput要素に属しているのかについての小さな情報です。仕様にも答えがあります。

Autocomplete属性が省略された場合は、代わりに要素のフォーム所有者のautocomplete属性の状態に対応するデフォルト値（ "on"または "off"）が使用されます。フォームの所有者がいない場合は、値 "on"が使用されます。

そう。フォームに配置すると、すべての入力フィールドに適用されます。個々の要素に配置すると、その要素だけに適用されます（フォームに要素がない場合でも）。 autocompleteがまったく設定されていない場合、デフォルトはonです。

まとめ

フォーム全体でautocompleteを無効にするには：

<form autocomplete="off" ...>

動的に実行する必要がある場合は、

<form autocomplete="random-string" ...>

個々の要素でautocompleteを無効にするには（フォーム設定の有無にかかわらず）

<input autocomplete="off" ...>

動的に実行する必要がある場合は、

<input autocomplete="random-string" ...>

そして、特定のユーザーエージェントはautocompleteを無効にしようとするあなたの最も困難な試みでさえも上書きできることを覚えておいてください。

30
Hooligancat

現在の解決策はtype="search"を使うことです。 Googleは、検索タイプの入力に自動入力を適用しません。

参照してください： https://Twitter.com/Paul_Kinlan/status/596613148985171968

更新04/04/2016： これは修正されたようです！ http://codereview.chromium.org/1473733008 を参照してください。

29
Nathan Pitman

ブラウザは自動補完を気にしません=オフ自動、あるいは間違ったテキストフィールドに資格情報を埋めますか？

ユーザーがこのフィールドをクリックするかタブキーを使用したときに、パスワードフィールドを読み取り専用に設定してアクティブにすることで修正しました。

ブラウザの自動入力を修正しました：読み取り専用にして書き込み可能にフォーカスを設定しました （マウスクリックとフィールドのタブ移動時）

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

更新：Mobile Safariはフィールドにカーソルを設定しますが、仮想キーボードを表示しません。新しい修正は以前と同じように機能しますが、仮想キーボードを処理します。

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

ライブデモ https://jsfiddle.net/danielsuess/n0scguv6/ /

// UpdateEnd

ちなみに、私の観察では、{詳細情報：

同じ形式にパスワードフィールドがあると、ChromeとSafariでこの奇妙な動作に気付くことがあります。_ _保存されている資格情報を挿入するためにブラウザがパスワードフィールドを探します。それから autofills usernameを最も近いtextlike-inputフィールドに入力します。これはDOMのパスワードフィールド の前に現れます（単に観察のために推測されます）。ブラウザが最後のインスタンスであり、あなたがそれを制御することができないので、時にはautocomplete = offでさえも資格情報を記入することを妨げないでしょう _は間違ったフィールドに、しかしユーザーまたはニックネームフィールドに。

24
dsuess

あなたはautocomplete="new-password"を使うことができます

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

で動作します：

  • クロム：53、54、55
  • Firefox：48、49、50
20
Steffi

これに対する解決策を探している人には、私はついにそれを理解しました。

ChromeがページがHTML5ページである場合にのみ、autocomplete = "off"に従います（私はXHTMLを使用していました）。

私は自分のページをHTML5に変換し、問題は解決しました（facepalm）。

9
Mr Fett

Autocomplete="Off"はもう動作しません。

"Off"の代わりにランダムな文字列だけを使ってみてください。例えばAutocomplete="NoAutocomplete"

助けになれば幸いです。

8
marco burrometo

私はこの問題に対する最新の解決策をもたらすためにこの答えを投稿しています。私は現在Chrome 49を使用していますが、これに対する回答はありません。私はまた、他のブラウザや以前のバージョンと連携する解決策を探しています。

このコードをあなたのフォームの始めに置いてください

<div style="display: none;">
    <input type="text" autocomplete="new-password">
    <input type="password" autocomplete="new-password">
</div>

それから、あなたの本当のパスワードフィールドには、

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

これが機能しなくなった場合、または他のブラウザやバージョンで問題が発生した場合は、この回答をコメントしてください。

に承認：

  • クローム：49
  • Firefox：44、45
  • エッジ：25
  • Internet Explorer：11
8
Loenix

見たクロムはautocomplete="off"を無視します、私はそれを解決するために「偽の入力」を使って「本当の」ものを満たすのではなく「偽の入力」を使うという愚かな方法でそれを解決します。

例： 

<input type="text" name="username" style="display:none" value="fake input" /> 
<input type="text" name="username" value="real input"/>

Chromeは「偽の入力」を埋め、送信時にサーバーは「実際の入力」値を取ります。

8
Chang

先週までは、Chrome [IEとFirefoxの2つの解決策がうまくいっていました。しかし、Chromeバージョン48のリリース（そしてまだ49）では、もはや機能しません。

  1. フォームの上部に次のものがあります。
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>

  1. パスワード入力要素に次のように入力します。

    オートコンプリート= "オ​​フ"

そこで、これを素早く修正するために、最初は最初にパスワード入力要素を無効に設定するという大きなハックを使用してから、それを再び有効にするためにdocument ready関数でsetTimeoutを使用しました。

setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);

しかし、これはとても頭がおかしいようで、私はもう少し検索をして、@tibaltsが で答えを見つけるのを見つけました / Chromeの自動入力を無効にする - /。彼の答えは、パスワード入力にautocomplete = "new-password"を使用することです。これはすべてのブラウザで動作するようです（私はこの段階で上記の修正番号1を使用しました）。

これがGoogle Chrome開発者向けのディスカッションのリンクです。 https://code.google.com/p/chromium/issues/detail?id=370363#c7

6
prajna

autocomplete = "off"の代わりに use autocomplete = "false" ;）

から： https://stackoverflow.com/a/29582380/75799

5
Basit

最近のブラウザではautocomplete=offはほとんど無視されています - 主にパスワードマネージャなどのためです。

このautocomplete="new-password"を追加してみることもできますが、これはすべてのブラウザで完全にはサポートされていませんが、いくつかのブラウザでは動作します。

5
Mahdi Afzal

autocomplete="off"は通常動作していますが、常に動作しているわけではありません。入力フィールドのnameに依存します。 「アドレス」、「メール」、「名前」などの名前-オートコンプリートされます（ブラウザはユーザーに役立つと考えています）、「コード」、「ピン」などのフィールドはオートコンプリートされません（autocomplete="off"が設定されている場合）

私の問題は-オートコンプリートがグーグルをいじっていた アドレスヘルパー

名前を変更して修正しました

から

<input type="text" name="address" autocomplete="off">

に

<input type="text" name="the_address" autocomplete="off">

chrome 71でテスト済み。

4
Yevgeniy Afanasyev

私はランダム文字を使ってGoogle Chromeとの際限のない戦いを解決しました。あなたがいつもランダムな文字列でオートコンプリートをレンダリングするとき、それは何も覚えていないでしょう。

<input name="name" type="text" autocomplete="rutjfkde">

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

4
step

Chrome 42以降、このスレッドのソリューション/ハック（2015-05-21T12:50:23+00:00現在）は、個々のフィールドまたはフォーム全体のオートコンプリートを無効にするために機能しません。

編集： 自動補完を防ぐために、他のフィールドの前に、実際にはフォームにダミーのEメールフィールドを1つ挿入するだけでよいことがわかりました（display: noneを使って非表示にできます）。私は、chromeが自動補完された各フィールドにある種のフォーム署名を保存していて、他の電子メールフィールドを含むことがこの署名を壊し、自動補完を妨げていると思います。

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

幸いなことに、これによって「フォームの署名」が破損しているため、どのフィールドも自動補完されず、送信前に偽のフィールドをクリアするためのJSは必要ありません。

古い答え：

私がまだ実行可能であることがわかった唯一のことは本当のフィールドの前にタイプemailとpasswordの2つのダミーフィールドを挿入することです。それらを隠すためにそれらをdisplay: noneに設定することができます（それらのフィールドを無視するのは十分スマートではありません）：

<form action="/login" method="post">
    <input type="email" name="fake_email" style="display:none" aria-hidden="true">
    <input type="password" name="fake_password" style="display:none" aria-hidden="true">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit">
</form>

残念ながら、フィールドはあなたのフォーム内になければなりません（そうでなければ両方の入力セットが自動入力されます）。そのため、偽のフィールドを本当に無視するには、フォーム送信でそれらをクリアするためのJSが必要になります。

form.addEventListener('submit', function() {
    form.elements['fake_email'].value = '';
    form.elements['fake_password'].value = '';
});

Javascriptを使用して値をクリアすると、オートコンプリートが無効になることがわかりました。そのため、JSを無効にして適切な動作を失うことが許容される場合は、Chrome用のJSオートコンプリート "polyfill"を使用してこれらすべてを単純化できます。

(function(document) {

    function polyfillAutocomplete(nodes) {

        for(var i = 0, length = nodes.length; i < length; i++) {

            if(nodes[i].getAttribute('autocomplete') === 'off') {

                nodes[i].value = '';
            }
        }
    }

    setTimeout(function() {

        polyfillAutocomplete(document.getElementsByTagName('input'));
        polyfillAutocomplete(document.getElementsByTagName('textarea'));

    }, 1);

})(window.document);
4
Bailey Parker

TL; DR： これは新しいパスワード入力であり、古いパスワードはオートコンプリート候補として提供されないことをChromeに伝えます。

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

autocomplete="off"は設計上の決定のために機能しません - 多くの研究は、ユーザーがパスワードをブラウザやパスワードマネージャに保存することができれば、パスワードをハッキングするのがはるかに長く困難になることを示しています。

autocompleteの仕様が に変更され、ログインフォームを自動補完しやすくするためにさまざまな値がサポートされるようになりました。

<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">

<!-- current-password will populate for the matched username input  -->
<input type="password" autocomplete="current-password" />

あなたがdon'tを提供している場合、Chromeはまだ推測しようとします、そしてそれがそうするとき、それはautocomplete="off"を無視します。

解決策は、パスワードリセットフォームにもautocomplete値が存在することです。

<label>Enter your old password:
    <input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
    <input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
    <input type="password" autocomplete="new-password" name="pass-repeat" />
</label>

このautocomplete="new-password"フラグを使用すると、このサイト用にパスワードが保存されている場合でも、パスワードを推測しないようにChromeに指示できます。

Chromeは credentials API を使用してサイトのパスワードを直接管理することもできます。これは標準であり、最終的にはおそらく世界的にサポートされる予定です。

4
Keith

34のクロムの後、autocomplete="off"タグで<form>を設定してもうまくいかない

私はこの厄介な行動を避けるために変更を加えました：

  1. パスワード入力のnameとidを削除します
  2. 入力にクラスを入れてください（例：passwordInput）

（これまでのところ、Chromeは保存されたパスワードを入力に入れませんが、フォームは壊れています）

最後に、フォームを機能させるには、ユーザーが送信ボタンをクリックしたとき、またはフォーム送信を起動したいときに実行するようにこのコードを配置します。

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

私の場合は、パスワード入力でid="password" name="password"を使用していたので、サブミトリを起動する前にそれらを元に戻しました。

3
Renato Lochetti

Chrome 49 および Diogo Cidの解決策にアップデートしました はもう動作しません。

ページが読み込まれた後に実行時にフィールドを隠しそしてフィールドを削除する別の回避策を行いました。

Chromeは最初の 表示 type="password"フィールドとその前のtype="text"フィールドに認証情報を適用する最初の回避策を無視するようになりました。そのため、CSSvisibility: hidden;を使用して両方のフィールドを非表示にしました

<!-- HTML -->
<form>
    <!-- Fake fields -->
    <input class="chromeHack-autocomplete">
    <input type="password" class="chromeHack-autocomplete">

    <input type="text" placeholder="e-mail" autocomplete="off" />
    <input type="password" placeholder="Password" autocomplete="off" />
</form>

<!-- CSS -->
.chromeHack-autocomplete {
    height: 0px !important;
    width: 0px !important;
    opacity: 0 !important;
    padding: 0 !important; margin: 0 !important;
}

<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
    $(".chromeHack-autocomplete").delay(100).hide(0, function() {
        $(this).remove();
    });
});

それはそれほどエレガントではないように見えるかもしれませんが、うまくいきます。

3
Cliff Burton

Chrome 48以降では、この解決策を使用してください。

  1. 本物のフィールドの前に偽のフィールドを置く：

    <form autocomplete="off">
  <input name="fake_email"    class="visually-hidden" type="text">
  <input name="fake_password" class="visually-hidden" type="password">

  <input autocomplete="off" name="email"    type="text">
  <input autocomplete="off" name="password" type="password">
</form>

  2. 偽のフィールドを隠す：

    .visually-hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

  3. できたね！

またこれは古いバージョンでも動作します。

3
yivo

すべての解決策を試した後、パスワードフィールドを持つフォームで、クロムバージョン：45のために働いているようです。

 jQuery('document').ready(function(){
        //For disabling Chrome Autocomplete
        jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
 });
3
anshuman

入力タイプ属性をtype="search"に変更します。

Googleでは、検索タイプの入力に自動入力を適用していません。

3
Matas Vaitkevicius

入力フィールドに名前または電子メールのいずれかが入力されるという同様の問題がありました。 autocomplete = "off"に設定しましたが、Chromeはまだ提案を強要しました。それは、プレースホルダーのテキストに "name"と "email"という単語が含まれていたためです。

例えば

<input type="text" placeholder="name or email" autocomplete="off" />

プレースホルダーの単語に幅ゼロのスペースを入れることでそれを回避しました。これ以上Chromeのオートコンプリートはありません。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />
2
WDuffy

私はこの解決策が最も適切であると思いました：

function clearChromeAutocomplete()
{
// not possible, let's try: 
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0) 
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off'); 
setTimeout(function () {
        document.getElementById('adminForm').setAttribute('autocomplete', 'on'); 
}, 1500);
}
}

DOMの準備ができた後、またはフォームがレンダリングされた後にロードする必要があります。

2
user2241415

私はオートコンプリートがユーザーの選択であるべきだと私は同意するが、Chromeがそれに過度に熱心である時がある（他のブラウザもそうかもしれない）。たとえば、別の名前のパスワードフィールドには保存されたパスワードが自動的に入力され、前のフィールドにはユーザー名が入力されます。フォームがWebアプリケーションのユーザー管理フォームであり、自動入力で自分の資格情報を入力したくない場合、これは特に問題になります。

Chromeはautocomplete = "off"を完全に無視するようになりました。 JSハックはうまくいくかもしれませんが、執筆時点では簡単な方法を見つけました。

Passwordフィールドの値を制御文字8（PHPの"\x08"またはHTMLの&#8;）に設定します。値があるためChromeはフィールドに自動入力しませんが、これはバックスペース文字なので実際の値は入力されません。

はい、これはまだハックですが、それは私のために働きます。 YMMV.

2
spikyjt

私は別の方法で解決しました。これを試すことができます。

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>
2
SarwarCSE

なぜこれが私の場合にうまくいったのかは分かりませんが、クロムで私はautocomplete="none"を使い、Chromeは私のテキストフィールドのアドレスを提案するのをやめました。

1
Chris Sprague

jQuery UIのオートコンプリートのようなウィジェットを使用する場合 それが自動補完属性を追加/オフに変更していないことを確認してください。これを使用するとこれが正しいことがわかり、ブラウザフィールドのキャッシュを上書きするために行った作業が中断されます。ウィジェットが初期化された後に、固有の名前属性があり、固有のオートコンプリート属性を強制するようにしてください。それがあなたの状況にどう影響するかについてのいくつかのヒントについては以下を見てください。

<?php $autocomplete = 'off_'.time(); ?>
<script>
   $('#email').autocomplete({
      create: function( event, ui ) {
         $(this).attr('autocomplete','<? echo $autocomplete; ?>');
      },
      source: function (request, response) { //your code here },
      focus: function( event, ui ) { //your code here },
      select: function( event, ui ) { //your code here },
   });
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />
1
SurferJoe

隠された入力要素のトリックは、自動入力を防ぐために依然として機能するように見えます（Chrome 43）が、覚えておくべき1つのことは、Chromeがプレースホルダータグに基づいて自動入力を試みることです。あなたは隠し入力要素のプレースホルダーを無効にしようとしている入力のそれに合わせる必要があります。

私の場合は、Google Place Autocompleteで使用していたプレースホルダーテキストが「City or Zip」のフィールドがありました。あたかもそれが住所書式の一部であるかのように自動記入しようとしていたようです。隠し要素に実際の入力と同じプレースホルダーを配置するまで、トリックは機能しませんでした。

<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
1
Sam

これは修正されたようです。 https://codereview.chromium.org/1473733008 を参照してください。

1
Nathan Pitman

autocomplete="off"は動作するようになったので、次のようにします。

<input id="firstName2" name="firstName2" autocomplete="off">

現在のChrome 70およびChrome 62以降のすべてのバージョンでテスト済み。

デモ 。

UPDATE：JSFiddleのデモンストレーションを読む前、または実際にJSFiddleのHTMLを調べる前に、人々がこれを軽視する傾向があるので（たとえば、 @AntonKuznetsov downからのコメントを参照）明確に表現する必要があります。

  • 一番上のinputはオートコンプリートで動作しています
  • 下inputはautocomplete="off"を追加することでオートコンプリート無効を持ちます
1
Alexander Abakumov

私はChrome - version 64.0.3282.140（Official Build）（64-bit）を使用していて、フォーム名とともに以下のコードを使用しましたが、それは私にとってはうまくいきます。

<form name="formNameHere">....</form>
<script type="text/javascript">
    setTimeout(function(){
        document.formNameHere.reset();
    },500);
</script>
0
Nishant

それをオートコンプリートにするための偽の分野を与えることを除いて、解決策のどれもうまくいきませんでした。この問題に対処するためにReactコンポーネントを作りました。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil
0
Brennan Cheung

この問題のために私はこのCSSソリューションを使いました。それは私のために働いています。

input{
  text-security:disc !important;
  -webkit-text-security:disc !important;
  -moz-text-security:disc !important;
}
0
gem007bd

Formタグの直後にこれを追加します。

<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>

これをあなたのcssファイルに追加してください：

.div-form{
opacity: 0;
}
0
ITinARRAY

AutoComplete = 'false'を使用する必要があります。これはchromeブラウザでも動作します。使用コード

<ng-form autocomplete="false"> 
.....
</ng-form>
0
SantoshK

オートコンプリートを防ぐには、入力値として空のスペースを設定するだけです。

<input type="text" name="name" value="  ">
0
JVitela

これが私にとってChromeバージョン51.0.2704.106 .<input id="user_name" type="text" name="user_name" autocomplete="off" required />と<input id="user_password" type="password" name="user_password" autocomplete="new-password" required />との組み合わせでうまくいったことです。私の問題は、new-passwordを実装した後もuser_nameフィールドにユーザー名のドロップダウンが表示されることです。

0
hyperj123

私は次のことを試してみました、そしてそれはChrome 53でトリックをするように見えます - それは同じくパスワードフィールドを入力するときに「パスワードを使う：」ドロップダウンを無効にします。

パスワード入力タイプをtextに設定してから、（インラインまたはjQuery/Vanilla JSを介して）onfocusハンドラーを追加して、タイプをpasswordに設定します。

onfocus="this.setAttribute('type','password')"

あるいはもっと良い：

onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"
0
Mike Rockétt

私はこれをスレッジハンマーアプローチと呼んでいますが、私が試した他のすべてのアプローチが失敗した場合にはうまくいきそうです。

<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />

注意：input name属性とid属性には、ブラウザにデータの内容に関するヒントを与えるものが含まれていないと、この方法ではうまくいきません。たとえば、 "FullAddress"の代わりに "fa"を使用しています。

そして、ページロードに関する次のスクリプト（このスクリプトはJQueryを使用します）：

$("[data-autocomplete-ninja]").each(function () {
    $(this).focus(function () {
        $(this).data("ninja-name", $(this).attr("name")).attr("name", "");
    }).blur(function () {
        $(this).attr("name", $(this).data("ninja-name"));
    });
});

上記の解決策は、ブラウザが他のフォームから、または同じフォームへの以前の送信から集められたデータを自動入力するのを防ぐべきです。

基本的には、入力がフォーカスされている間にname属性を削除します。要素の名前にセレクタを使用するなど、要素がフォーカスされている間にname属性を必要とすることを何もしていない限り、この解決策は無害です。

0
jonh