web-dev-qa-db-ja.com

CSS経由でオートコンプリートを無効にする

CSSを使用して、フォーム要素（具体的にはテキストフィールド）のオートコンプリートを無効にすることはできますか？

オートコンプリート要素を許可しないタグライブラリを使用していますが、JavaScriptを使用せずにオートコンプリートを無効にしたいと思います。

htmlcssforms
84
David

生成されたidとnameを毎回使用できますが、これは異なるため、ブラウザーはこのテキストフィールドを記憶できず、いくつかの値を提示できません。

これは少なくともクロスブラウザで安全な代替手段ですが、RobertsonM（autocomplete="off"）。

45
Christopher Klewes

現状では、CSSには「オートコンプリートオフ」属性はありません。ただし、htmlにはこのための簡単なコードがあります。

<input type="text" id="foo" value="bar" autocomplete="off" />

サイト全体のエフェクタを探している場合、簡単な方法は、すべての 'input'を実行してこのタグを追加するjs関数を用意するか、対応するcssクラス/ idを探すことです。

Autocomplete属性は、ChromeおよびFirefox（！）で正常に機能しますが、 も参照してください。HTMLフォームでオートコンプリートを無効にする有効な方法はありますか？

120
RobertsonM

jQueryで簡単に実装できます

$('input').attr('autocomplete','off');
48
ahhmarr

formを使用している場合、すべてのオートコンプリートを無効にできます。

<form id="Form1" runat="server" autocomplete="off">
15
Ernest

CSSにはこの機能はありません。クライアント側のスクリプトを使用する必要があります。

13
Sampson

私はこの質問の答えやウェブ上の他の記事からすべての提案された方法を試しましたが、とにかく動作しませんでした。フォーム要素でautocomplete = "new-random-value"、autocomplete = "off"を試しました。以下のクライアント側スクリプトを使用しましたが、ユーザーの1人として$（document）.ready（）の外側にあります。

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

ブラウザーの別の優先順位がこの奇妙な動作を引き起こす可能性があります！そこでさらに検索し、最後に this good article の行の下を注意深く読みました。

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

サイトがにautocomplete = "off"を設定し、フォームにユーザー名とパスワードの入力フィールドが含まれている場合、ブラウザーは引き続きこのログインを記憶し、ユーザーが同意すると、ブラウザーはユーザーが次にこれらのフィールドを自動入力しますページにアクセスします。サイトがユーザー名とパスワードのフィールドにautocomplete = "off"を設定した場合、ブラウザーは引き続きこのログインを記憶し、ユーザーが同意すると、ブラウザーはユーザーが次にページにアクセスしたときにこれらのフィールドを自動入力します。これは、Firefox（バージョン38以降）、Google Chrome（34以降）、およびInternet Explorer（バージョン11以降）の動作です。

ユーザーが別の人の新しいパスワードを指定できるユーザー管理ページを定義しているため、パスワードフィールドの自動入力を防止する場合は、autocomplete = "new-パスワード」;ただし、この値のサポートはFirefoxに実装されていません。

うまくいきました。 chromeで特別に試しました。これが引き続き機能し、他の人を助けることを願っています。

3
QMaster

@ ahhmarr's ソリューションのおかげで、Angular + ui-router環境で同じ問題を解決できました。興味のある人のためにここで共有します。

私のindex.html次のスクリプトを追加しました。

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

次に、状態の変更をカバーするために、ルートコントローラーに次を追加しました。

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

タイムアウトは、jqueryを適用する前にhtmlがレンダリングするためのものです。

より良い解決策を見つけた場合はお知らせください。

1
TrampGuy

すべての入力に偽のオートコンプリート名を追加することで問題を解決しました。

$("input").attr("autocomplete", "fake-name-disable-autofill");
0
Webdma