50

特定の で Chrome の自動入力機能を無効<input>にして、ページの読み込み時に自動入力されないようにするにはどうすればよいですか?

同時に、オートコンプリートを有効にしておく必要があるため、ユーザーは入力をクリックするか入力することで提案のリストを表示できます。これはできますか？

編集:プレーンな Javascript または jQuery が必要であると感じた場合、またはソリューションをよりシンプルにすることができると思われる場合は、自由に使用してください。

4

21 に答える 21

86

これがあなたが望む魔法です：

    autocomplete="new-password"

Chrome は意図的に と を無視autocomplete="off"しautocomplete="false"ます。ただし、new-password新しいパスワードフォームが自動入力されるのを防ぐための特別な条項として入れています.

上記の行をパスワード入力に入力すると、フォームの他のフィールドを編集できるようになり、パスワードは自動入力されません。

于 2016-04-11T02:29:37.600 に答える
43

少し遅れましたが、ユーザーが新しいパスワードを入力する必要があるサインアップ/登録ページなどのページに役立つ、私の絶対確実なソリューションを次に示します。

<form method="post">
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
    <input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome は 2 つのパスワード入力を検出し、パスワード フィールドに自動入力しません。ただし、フィールド id="password_fake" は CSS によって非表示になります。そのため、ユーザーには 1 つのパスワード フィールドしか表示されません。

また、Chrome の実験的な特定の自動塗りつぶし機能である "x-autocompletetype" 属性をいくつか追加しました。私の例では、chrome はパスワード フィールドではなく、名、姓、メール アドレスを自動入力します。

于 2013-10-04T05:59:03.270 に答える
26

修正:ブラウザの自動入力を禁止する

 <input type="password" readonly onfocus="this.removeAttribute('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

説明 空白またはウィンドウ オン ロード関数を埋める代わりに、このスニペットは readonly-mode を設定し、ユーザーがこの入力フィールドにフォーカスした場合に書き込み可能に変更することで機能します (フォーカスにはマウス クリックとフィールド間のタブ移動が含まれます)。

jQuery は不要で、純粋な JavaScript です。

于 2015-02-22T20:59:11.370 に答える
4

これをテストするためにページの読み込み時にChromeを自動的に自動入力することはできませんがautocomplete="off"、フィールドに追加してから、読み込み時に属性を削除してみてください:

$(window).load(function() { // can also try on document ready
    $('input[autocomplete]').removeAttr('autocomplete');
});
于 2012-06-17T16:23:31.410 に答える
4

美しい解決策ではありませんが、Chrome 56 で動作しました:

<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">

値のスペースに注意してください。その後：

$(document).ready(function(){
   setTimeout(() => $('#name').val(''),1000);
});
于 2017-03-02T21:40:08.217 に答える
2

これは役立つかもしれません：https ：//stackoverflow.com/a/4196465/683114

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

ロード時のように見えます。自動入力ですべての入力を検索し、outerHTMLを追加して元の名前を削除し、値と名前を保持します（IDなどを保持するために簡単に変更できます）

これで自動入力テキストが保持される場合は、

var text = "";   /* $(this).val(); */

これが投稿された元のフォームから、オートコンプリートを保持すると主張しています。:)

幸運を！

于 2012-06-19T14:35:01.893 に答える
1

1 つの解決策は、入力を空白文字で自動入力し、フォーカスを明確にすることです。

例: http://nfdb.net/autofill.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield;

            // After the document has loaded, manipulate DOM elements.
            window.addEventListener('load', function() {

                // Get the username field element.
                userfield = document.getElementById('user');

                // Listen to the 'focus' event on the input element.
                userfield.addEventListener('focus', function() {

                    // Checks if the value is the EM space character,
                    // and removes it when the input is recieves focus.
                    if (this.value == '\u2003') this.value = ''

                }, false);

                // Listen to the 'blur' event on the input element.
                // Triggered when the user focuses on another element or window.
                userfield.addEventListener('blur', function() {

                    // Checks if the value is empty (the user hasn't typed)
                    // and inserts the EM space character if necessary.
                    if (this.value == '') this.value = '\u2003';

                }, false);
            }, false);
        </script>
    </head>
    <body>
        <form method="GET" action="">
            <input id="user" name="username" type="text" value="&#8195;"/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>

これにより、ブラウザによるフィールドの自動入力が停止されますが、オートコンプリートは許可されます。

ページの読み込み後にフォーム入力をクリアする別の例を次に示します。この方法の利点は、入力に空白文字が含まれないことです。欠点は、自動入力された値が数ミリ秒間表示される可能性がわずかにあることです。

http://nfdb.net/autofill2.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield, passfield;

            // Wait for the document to load, then call the clear function.
            window.addEventListener('load', function() {

                // Get the fields we want to clear.
                userfield = document.getElementById('user');
                passfield = document.getElementById('pass');

                // Clear the fields.
                userfield.value = '';
                passfield.value = '';

                // Clear the fields again after a very short period of time, in case the auto-complete is delayed.
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);

            }, false);
        </script>
    </head>
    <body>
        <div>This form has autofill disabled:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input id="user" name="username" type="text" value=""/><br/>
            <input id="pass" name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
        <div>This form is untouched:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input name="username" type="text" value=""/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>
于 2012-06-12T17:58:37.757 に答える
0

これが私が発見した最新の解決策です。これにより、何も入力する前に Google がフィールドに入力して黄色で強調表示するのを防ぎます。基本的に、フィールドに「display:none」を入力すると、Google はそれを無視して次のフィールドに移動するほどスマートです。「visibility:hidden」を入れると、計算を妨害するように見えるフォームのフィールドとしてカウントされます。JavaScript は必要ありません。

<form method='post'>
    <input type='text' name='u' size='16'/>
    <input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
    <input type='password' name='p' size='16'/>
</form>
于 2016-08-25T13:20:24.810 に答える
0

これまでのところ、これが機能していることがわかりました。クロムの自動入力後にアクションを完了するには、タイムアウトを1ミリ秒に設定する必要があります..

$(window).on('load', function() {
    setTimeout(function(){
        $('input[name*=email],input[name*=Password]').val('-').val(null);
    },1);
});

この関数をクロムの自己完了の発火にアタッチする方法があるかどうか、またはそれを再宣言する方法があるかどうか疑問に思っています

于 2014-08-25T15:20:09.340 に答える
0

type="password"Chrome パスワード マネージャーは、保存されたパスワードを含む入力要素を探して入力します。プロパティも無視されautocomplete="off"ます。

最新のChrome (バージョン 40.0.2181.0 カナリア)の修正は次のとおりです。

<input name="password">

JS:

setTimeout(function() {
    var input = document.querySelector("input[name=password]");
    input.setAttribute("type", "password");
}, 0)
于 2014-10-08T15:11:02.203 に答える
0

パーティーには少し遅れました...しかし、これはいくつかのjQueryで簡単に実行できます:

$(window).on('load', function() {
    $('input:-webkit-autofill').each(function() {
        $(this).after($(this).clone(true).val('')).remove();
    });
});

長所

  • 自動入力テキストと背景色を削除します。
  • フィールドのオートコンプリートを保持します。
  • 入力要素にバインドされたイベント/データを保持します。

短所

  • ページ読み込み時の自動入力フィールドのクイック フラッシュ。
于 2013-07-20T00:29:39.603 に答える
0

最も簡単な解決策は、ユーザー名フィールドに ' ' の値を指定することです (これは引き続き 'username' と呼ぶことができます)。

ユーザーが入力した値によって値を設定できる場合 (通常、検証中のフォームの場合)、値がまだ設定されていない場合は、' ' の値を指定します。PHPでは、

if(trim($username) == ''){$username = ' ';}

<input type='text' value = '$username' name = 'Username' />

実際、ユーザー名とパスワードのオートコンプリートは、パスワードがどれほど不明瞭であるかに関係なく、コンピューターにアクセスするすべての人にすべてのアカウントへのアクセスを効果的に与えると思います...

于 2015-09-10T16:29:07.263 に答える
0 
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
    fields.val('');
}, 500);
于 2014-04-17T12:54:25.237 に答える
0

setTimeout を使用したり、奇妙な一時的な入力をしたりするのは好きではありません。だから私はこれを思いつきました。

パスワードフィールドのタイプをテキストに変更するだけです

<input name="password" type="text" value="">

そして、入力したユーザーフォーカスが再びパスワードに変更されると、

$('input[name=password]').on('focus', function (e) {
    $(e.target).attr('type', 'password');
});

最新の Chrome (バージョン 54.0.2840.71 (64 ビット)) を使用して動作しています。

于 2016-11-03T17:28:39.893 に答える
-1

自動入力は入力のname属性で機能するため、「firstname」のような入力に名前を設定すると、chromeが入力を入力します。

無効にする場合は、「supermanname」などの奇妙な名前を使用してください。

Javascriptはあなたの問題を解決することはできません。

2番目の解決策：同じ名前で入力を非表示にし、他の入力でそれらの値を設定できます。jQUeryでJを簡略化しました。

<form action="handlerfile.php" method="post">
<input type="text" id="1" onclick="$("#2").val($("#1").val())"/>
<input type="hidden" name="username" id="2">
</form>
于 2012-06-15T15:33:12.027 に答える
-6

オートコンプリートを防ぐために、入力には無効を使用することをお勧めします。

<input type="password" ... disabled />
于 2015-08-31T13:35:03.440 に答える