web-dev-qa-db-ja.com

入力タイプがパスワードで、オートコンプリートを有効にするためにその上の入力フィールドを作成すると、autocomplete = 'off'は機能しません

オートコンプリートが無効になっているフォームがありますが、機能せず、Firefox以降のChromeでオートコンプリートが有効になります

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

タイプをパスワードからテキストに変更すると、すべてのブラウザーで機能します。誰でもこの問題を解決するのに役立ちますか？

htmlautocomplete
35
user2594463

ブラウザには通常、フォームに関する2つの関連する異なる機能があります。

  • フォームのオートコンプリート。<input type="text">タイプ（および同様の）のアイテムは、入力された値を収集し、ドロップダウンリストの形式で提供します。
    （これは非常にうまく機能するシンプルな機能です）

  • パスワードマネージャー。ログインフォームの送信を検出すると、ブラウザーがユーザー名とパスワードの組み合わせを記憶するように求めます。サイトに戻ると、ほとんどのブラウザは利用可能なユーザー名をドロップダウンボックス（Firefox、Chrome、Internet Explorer ...）に表示しますが、一部のブラウザーにはツールバーボタン（Opera）があります。また、Chromeはハードコーディングされた黄色のフィールドを強調表示します。
    （これはヒューリスティックに依存し、特定のページで失敗する可能性があります。）

autocomplete="off"のタグが付いたフォームのEdgeケースがあります。ログインフォームで、ユーザーが以前にユーザー名/パスワードを保存していた場合はどうなりますか？実際には削除ローカルデータベースからのパスワードは不適切と思われるため、おそらくブラウザはそうしません。 （実際、フォームのオートコンプリートからのデータも消去されません。）Firefoxはユーザーにパワーを与えることにしました。パスワードを持っているので、それを使用させます。 Chromeはサイトに電力を供給することを決定します。

18
Álvaro González

フォームのロード中にフィールドを読み取り専用にすることができます。フィールドがフォーカスされている間、そのフィールドを編集可能に変更できます。これは、オートコンプリートを回避する最も簡単な方法です。

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />
38
sujivasagam

同じ問題に直面したとき、パスワードフィールドの上に一時的なテキストボックスを作成して非表示にして解決しました

このような、

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

usernameテキストフィールドに、以前に入力した単語がドロップダウンに表示されないようにします。入力フィールド<input type="text" style="display:none;">にはname、idなどの属性がないため、追加のパラメーターも送信しません。

これが良い方法かどうかはわかりませんが、問題は解決します。

30
Arivarasan L

これにより、入力フィールドの（type = "password"）にパスワードが自動入力されなくなります。

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>
12
sunny rai

パスワード入力フィールドにautocomplete="new-password"attributeを追加するだけです。

autocompleteの詳細： https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

6
alexpirine

私はあらゆる種類の回避策を試しましたが、私の場合、その組み合わせだけがすべてのブラウザで機能しました：

<input type="password" id="Password" name="Password" 
       autocomplete="new-password" 
       onblur="this.setAttribute('readonly', 'readonly');" 
       onfocus="this.removeAttribute('readonly');" readonly>

そして、それも非常にきれいなソリューションです:)

4
Jan Capuder

テキストタイプの場合は、autocomplete="off"またはautocomplete="false"を使用します

<input id="username" type="text" autocomplete="false">

パスワードタイプにはautocomplete="new-password"を使用します

<input id="password" type="password" autocomplete="new-password">
3
Venki WAR

ここで触発された私のソリューションは次のようになります。

<form>
    <input type="text" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    <input type="password" style="position: absolute !important; left: -10000px !important; top: -10000px !important;">
    Username: <input type="text">
    Password: <input type="password">
    <input type="submit">
</form>

それは確かに2017く、2017年に置き忘れられたように感じますが、機能し、自動入力からユーザー名とパスワードのフィールドを保護します。 Firefox（執筆時点ではバージョン51）では、name、id、またはautocompleteのどの組み合わせが使用されているかは問題ではありません。入力フィールド。最初の2つのダミーフィールドがないと、ドメインが一致するたびに自動入力が行われ、1日が台無しになります。

2
VoY

私のために働いたのは、次のように入力タイプ= "パスワード"でのみautocomplete = "new-password"を使用することでした：

<input id="username" type="text">
<input id="password" type="password" autocomplete="new-password">

フォームを持つ入力の数とは無関係。

2
Sieg

FirefoxとChromeで機能するように見えるハックを次に示します。

Firefoxでは、パスワードフィールドが隠されている（無効：なし）場合でも、パスワードフィールドの直前に無効なテキストフィールドがあるとうまくいくようです。

Chromeでは、hasが表示されます。

だから私はこのような何かをお勧めします：

HTML：

<input class="password-autocomplete-disabler" type="text" disabled>
<input type="password" name="pwd">

CSS

input[type=text].password-autocomplete-disabler {
    position: absolute !important;
    left: -10000px !important;
    top: -10000px !important;
}
2
jlowcs

パスワードについては、現在機能していません。

そのため、デフォルトではパスワードフィールドをテキストとして作成し、次のjsコードを使用します。

$('#real-password').on('input', function(){
            if ($(this).val() !== '') {
                $(this).attr('type', 'password');
            } else {
                $(this).attr('type', 'text');
            }
   });
1
Lakin Mohapatra
<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

どうぞ。

1
Bhaumik Thakkar

これは古い質問ですが、ブラウザは時間とともに変化しています。ここで言及したこの質問に対する answers の一部は、パスワードフィールドの上に一時的なテキストボックスを作成して非表示にすることは過去に機能していたかもしれませんが、現在、ブラウザがポップアップするのを防ぐ最も簡単な方法パスワードマネージャーは、次のように、それぞれが異なるダミー値を持つ少なくとも3つの個別の追加の非表示パスワード入力を持つ必要があります。

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
        <input type="password" style="display: none;" value="dummyinput1"/>
        <input type="password" style="display: none;" value="dummyinput2"/>
        <input type="password" style="display: none;" value="dummyinput3"/>
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>
1
code4kix

私のソル：

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

function turnOnPasswordStyle(){
    $('#inputpassword').attr('type', "password");
}
1
Stav Bodik

autocomplete="off"を追加してもカットされません。Chromeでは無視されます。

入力タイプ属性をtype="search"に変更します。
Googleは、検索タイプの入力に自動入力を適用しません。

1
Matas Vaitkevicius

入力に名前がない場合（たとえば、name属性が設定されていない場合）、ブラウザーはフィールドをオートコンプリートできないことがわかりました。これは誰にとっても解決策ではありませんが、AJAXを介してフォームを送信する場合は、これを試してみてください。

1
JotaDeAA

私は最近この問題に直面しましたが、フィールドに事前入力できるため簡単な解決策はありませんでしたが、readyイベントでパスワードタイプを設定することで思いついたエレガントなハックを共有したいと考えました。

入力フィールドを作成するときに、入力フィールドをパスワード型として宣言しないでください。jQueryを使用して追加するために、準備完了イベントリスナーを追加します。

<input type="text" name="pswd" id="password" maxlength="16" size="20" >

<script>
$(function(){
    document.getElementById('password').setAttribute('type', 'password');
});
</script>
1
Matthew

autocomplete=offは、主にパスワードマネージャーなどが原因で、最近のブラウザーではほとんど無視されます。

これを追加してみてくださいautocomplete="new-password"すべてのブラウザで完全にサポートされているわけではありませんが、一部のブラウザでは動作します

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password">
    </li>
        ...
    </ul> </form>
1
Mahdi Afzal

この問題はbrowser（chrome）に固有のものだと思うので、chromeのみに条件を追加することで管理できます。

@Html.PasswordFor(model => model.Password, new { @autocomplete = (Request.Browser.Browser.ToLower().Contains("chrome") ? "new-password" : "off") })

@autocomplete =（Request.Browser.Browser.ToLower（）。Contains（ "chrome"）？ "new-password"： "off"）

1
Chirag

誰もがこれを使用しない理由.

        <form>
            <div class="user">
            <i> </i>
            <input type="text" id="u1" name="u1" value="User Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'User Name';}">       
            </div>          
            <div class="user1"> 
            <i> </i>        
            <input type="password" id="p1" name="p1" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" >
            </div>
            <div class="user2">                         
            <input type="submit" value="Login">
            </div>
        </form>

それはとても簡単です... :)

1
MRRaja

別の方法は、自動入力を防止するのではなく、ページの読み込み時にパスワードフィールドの値を消去することです。

JQueryでは、次のようなものを追加するだけです。

$(function() { $('input[type="password"]').val(''); });
1
Andrej

ちょうど別のシンプルなソリューションを見つけて、3つのメインブラウザーすべてで私のために働いたChrome FirefoxとOpera

<input type="text" onfocus="this.type='email'"/>
<input type="text" onfocus="this.type='password'"/>
0
gourav bajaj

以下に示すようにautocomplete = "new-password"を設定してみてください。

<input type="password" name="pswd" id="password" maxlength="16" size="20" autocomplete="new-password" />
0
Baig