web-dev-qa-db-ja.com

Chrome=を無効にしてユーザー名/メールパスワードを自動入力するにはどうすればよいですか？

SOで何度も回答されていますが、それは古いバージョンのChrome向けです。

Chromeバージョン53.0.2785.143。

パスワードフィールドを自動入力するためにChromeを無効にし、

以前のSOの回答、

方法1：

偽のユーザー名パスワードを使用してみました。

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

方法2：

autocomplete='new-password'およびautocomplete='false'およびautocomplete='off'を使用してみました

しかし、どれも機能しません。

htmlhtml5google-chrome
16
Umair

これを試してください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="" />

この問題を解決するためにjQueryを使用することもできます。これがあなたに役立つことを願っています。ここにコメントを入れないでください、幸運:)

更新：

これはchromeバージョンに依存します。時々、これはchrome新しいバージョンでは動作しません。コードスニペットもあり、何が起こったのかコメントしてください:)

ソリューション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);
            });

要素から「name」および「id」属性を削除し、1ms後にそれらを割り当てます。これを文書に入れて準備してください。

ソリューション

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

テスト済みで動作するChrome 53

ソリューション4

試してくださいautocomplete="false" の代わりに autocomplete="off"またはnofill

20
Sachith
  1. ユーザー名にユーザー名の値を持つオートコンプリート属性を追加します。
  2. ユーザー名とパスワードを2つの個別のフォームに分ける「最初のメール」サインインフローを実装した場合は、パスワードの収集に使用するフォームにユーザー名を含むフォームフィールドを含めます。もちろん、レイアウトに適している場合は、CSSを介してこのフィールドを非表示にすることができます。
  3. サインインフォームのパスワードフィールドにcurrent-passwordの値を持つオートコンプリート属性を追加します。
  4. サインアップフォームとパスワード変更フォームのパスワードフィールドに、new-passwordの値を持つオートコンプリート属性を追加します。

  5. ユーザーがサインアップまたはパスワード更新中にパスワードを2回入力する必要がある場合は、両方のフィールドに新しいパスワードのオートコンプリート属性を追加します。

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

Chromeは、入力type="password"-それ以外の場合、ユーザーのパスワードがプレーンテキストで公開されるリスクがあります。そのため、type="text"を入力フィールドで入力してから、type属性を"password"ユーザーが入力に焦点を合わせたとき。

パスワードフィールド：

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

完全な例：（Bootstrap 3つのクラスと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

管理者がユーザーの電子メール/パスワードを変更するシナリオでは、自動入力がユーザーの電子メールを管理者のパスワードと入力された管理者のパスワードに置き換えました。

私のために働いたのは、ページがロードされてから1秒後にフィールド（メール、パスワード...）を無効に設定し、tiemoutで有効にすることでした。このようにして、ブラウザの自動入力がそれらを無視した後、ユーザーが利用できるようになります。

リスクは、何かがjsを壊し、利用できないままになることです。

サーバーパーツが入力名にあまり依存していない場合は、ログインフォームで使用されているものとは異なる名前に変更することをお勧めします-特に指定しない限り、自動入力されません

それ以外の場合のサンプルコードは次のとおりです。

 <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>
1
Ivan Pavlov

22/02/2019の時点で、私はこれらを試しましたが、有効な解決策はありませんでした。 visibility、display、autocompleteで試しましたが、機能していないようです。 Material UIを使用しているときに何かが欠けているのかもしれません。

私にとっては、2つのソリューションが機能しました。これは [〜＃〜] jsx [〜＃〜] ネイティブhtml css構文で同じプロパティを使用できるコードです

1）不透明度と位置付き

 <input type="email" style={{opacity:"0", position:"absolute"}}/>
 <input type="password" style={{opacity:"0", position:"absolute"}}/>

2）Zインデックスと位置を使用

<input type="email" style={{zIndex:":-100", position:"absolute"}}/>
<input type="password" style={{zIndex:"-100", position:"absolute"}}/>

これが誰かの時間を節約することを願っています。

0
Anand Singh

Mozillaのドキュメントによると、最新のブラウザのほとんどでは、オートコンプリートを「オフ」に設定しても、パスワードマネージャーがユーザーにユーザー名とパスワードの情報を保存するかどうかを尋ねたり、サイトのログインフォームにこれらの値を自動的に入力したりすることはできません。

あなたは使わなければなりません

autocomplete = "new-password"

新しいアカウントを作成するとき、またはパスワードを変更するとき、一般的な「現在のパスワードを入力する」フィールドではなく、「新しいパスワードを入力する」または「新しいパスワードを確認する」フィールドに使用する必要があります。これは、誤って既存のパスワードを入力することを防ぎ、安全なパスワードの作成を支援するために、ブラウザで使用される場合があります

参照および理解を深めるために、すべてのオートコンプリート値を確認できます here .

0
RAGINROSE

JQuery disableAutoFillプラグインを使用する

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

ドキュメント： https://github.com/terrylinooo/jquery.disableAutoFill

デモ： https://terrylinooo.github.io/jquery.disableAutoFill/

0
Terry Lin

これに対する1つの潜在的な解決策は、最初に入力タイプを「テキスト」に設定し、フィールドの編集後にタイプを「パスワード」に更新する入力のイベントリスナーを追加することです。これにより、パスワード入力のすべての機能を保持し、できればパスワードの自動入力/管理を回避できます。何かのようなもの：

HTML

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

JS

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

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