web-dev-qa-db-ja.com

Javascriptを使用してchromeでパスワードの保存バブルを無効にするにはどうすればよいですか？

ユーザーがログインした後でも「パスワードの保存」バブルが表示されないようにする必要があります。

Autocomplete = offは答えではありません。

この問題に対する安全なソリューションを提供する投稿はありません。 Chromeでパスワードバブルを無効にする方法は本当にありませんか？

javascripthtmlangularjsgoogle-chromeinternet-explorer-8
37
Cognitronic

「サポートされている」方法はありません。

パスワードコンテンツを非表示フィールドにコピーし、送信する前にパスワード入力を削除しました。

送信時にページにパスワードフィールドがないため、ブラウザは保存を要求しません。

私のjavascriptコード（jqueryを使用）は次のとおりです。

function executeAdjustment(){       
        $("#vPassword").val($("#txtPassword").val());
        $(":password").remove();        
        var myForm = document.getElementById("createServerForm");
        myForm.action = "executeCreditAdjustment.do";
        myForm.submit();
    }
20
Leon

何時間も検索した後、私は独自のソリューションを思い付きました。これはChrome=とSafariで動作するようです（ただし、FirefoxまたはOperaではなく、IEのテストは行っていません））。トリックは、パスワードフィールドを2つのダミーフィールドで囲むことです。

<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">

私が使用したCSSは次のとおりです。

.stealthy {
  left: 0;
  margin: 0;
  max-height: 1px;
  max-width: 1px;
  opacity: 0;
  outline: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1;
}

注：ダミー入力フィールドは、フィールド自体が非表示ではなく囲まれている場合でも、ブラウザーがそれを検出して非表示フィールドを無視するため、display: noneで非表示にできなくなりました隠しラッパーで。したがって、入力フィールドを「非表示」にせずに基本的に非表示およびクリック不可にするCSSクラスの理由。

17
Vadim

<input type="password" style="display:none"/>をフォームの上部に追加します。 Chromeのオートコンプリートは、最初に見つかったパスワード入力とその前の入力を埋めるので、このトリックでは、重要ではない不可視の入力のみを埋めます。

4
erikkallen

最良の解決策は、値をアスタリスクまたはドットで手動で置き換えて、入力テキストで入力パスワードをシミュレートすることです。

3
Issam Zoli
<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />

<script>
  function init() {
       $('#password').replaceWith('<input type="password" id="password" />');
  }     
</script>

firefoxでテストし、chrome期待通りに動作します。

2
Ramakrishnan M

これを次のマークアップで処理しました。

#txtPassword {
  -webkit-text-security: disc;
}
<form autocomplete="off">
  <input type="text" name="id" autocomplete="off"/>
  <input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
  <input type="password" name="password" id="txtPassword" autocomplete="off"/>
  <button type="submit" class="login100-form-btn">Login</button>
</form>
1
Prasanna Jathan

私が必要とするすべての利点を備えた代替手段は見つからなかったので、新しいものを作成しました。

HTML

<input type="text" name="password" class="js-text-to-password-onedit">

jQuery（jQueryを使用しない場合は、同じロジックのVanilla JSに置き換えてください）

$('.js-text-to-password-onedit').focus(function(){
    el = $(this);
    el.keydown(function(e){
      if(el.prop('type')=='text'){
        el.prop('type', 'password');
      }
    });
    // This should prevent saving Prompt, but it already doesn't happen. Uncomment if nescessary.
    //$(el[0].form).submit(function(){
    //  el.prop('readonly', true);
    //});
});

利点：

  • プロンプトをトリガーしません
  • 自動読み込みをトリガーしません（ページの読み込み時でも型の変更時でもない）
  • 実際に使用されている入力にのみ影響します（複雑な環境での邪魔されない要素の複製/テンプレート化を許可します）
  • クラスごとのセレクター
  • シンプルで信頼性（新しい要素はなく、添付されたjsイベントがあれば保持します）
  • 最新のChrome 61、Firefox 55、およびIE11でのテストと動作
1
Alph.Dev

PrimeFacesを使用した独自のjQueryソリューション。 ChromeおよびInternet Explorerで動作しますが、Firefoxでは動作しません）

<script  type="text/javascript" charset="utf-8">
$(function(){
    $('#frmLogin').on('submit',function(e){

        $(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8"  tabindex="2"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");

    });
});
</script>

<h:inputSecret id="password" value="#{loginMB.password}" class="form-control" 
    placeholder="Contraseña" tabindex="3"  label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
    <p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
0
Edgard Jaime Hernandez Montero

2つの通常のテキストボックスを使用して、これを覆しました。 1つは実際のパスワードを含み、もう1つはマスクとして機能します。次に、パスワードボックスの不透明度を0に設定し、マスクテキストボックスを無効にします-しかし、背景色は白に設定されて有効になっています。次に、マスクボックスの上にパスワードボックスを配置します。 jscript関数では、マスクのテキスト値を更新して、パスワードボックスでキーを押すたびに「*」文字の文字列を表示します。 2つの欠点：カーソルの点滅は、ブラウザによっては表示される場合があります。 IEでは表示されますが、ChromeまたはFirefoxでは表示されません。ユーザーが入力しているときに少し遅れがあります。

私のコードスニペットはaspにあります：

$(window).ready(function() {
  var pw = $('#txtPassword');
  var mask = $('#txtMask');
  $(pw).css('opacity', '0');
  $(pw).keyup(function() {
    var s = '';
    for (var i = 0; i < $(pw).val().length; i++)
      s = s + '*';
    mask.val(s);
  })
});
style... .password {
  font-family: monospace;
  position: absolute;
  background-color: white;
}
Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />
0
GDev

私のために働いた唯一のことは、ドキュメントの準備ができた後に入力値にスペースを追加し、ユーザーが入力に注目したときにスペースを削除することでした。

$('.login-input').val(' ');
$('.login-input').on('focus', function() {
    $(this).val('');
});

シンプルで簡単。動作するChrome64。Firefoxで必要なのはautocomplete="off"属性の入力。

0
Sevban Öztürk

まず第一に私はあなたに何かを伝えたいです。 [input type="text"]および[input type="password"]主要なブラウザはそのためのポップアップを提供します。

次に、[input type="password"]から[input type="text"]その後、そのためのCSSがあります

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}
0
Jay Ponkia

通常のページ内でサポートのみのログインページで作業するときに、ブラウザーがパスワードの動作を強制する方法について2つの問題がありました（サポートログインを保存しないでください）。

  1. ブラウザは、邪魔になるページの残りの部分からのログインを推奨します。
  2. ブラウザは、入力された技術パスワードを保存するように求めます。

だから、私はさまざまなstackoverflowの投稿で見つけた2つのソリューションを組み合わせて、ここに投稿すると思いました。私はjQueryを使用していますが、原則は通常のJavaScriptにも変換できます。

まず、パスワードフィールドをテキストフィールドとして開始し、後でJavaScriptで変更します。これにより、ブラウザーが保存されたパスワードを提供しない可能性が十分にあります。

次に、フォームを送信する直前に、パスワードフォームをテキストフィールドに戻しますが、パスワードが見えないように最初に非表示にします。これは、パスワードフィールドが消えたときに別のテキストフィールドを追加することで見栄えを良くすることができますが、それは見た目だけです。

<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
  $('#password').on('focus', function()
  {
    $(this).prop('type', password');  // this stops pre-saved password offers
  });
  $('#techForm').on('submit', function()
  {
    $('#password').hide().prop('type', 'text');  // this prevents saving
  });
});
</script>

これはFirefoxで機能し、Chrome 2017年9月12日現在。

0
semmelbroesel