wake-up-neo.com

Wie deaktiviere ich die Sprechblase zum Speichern von Passwörtern mit Javascript?

Ich muss in der Lage sein, zu verhindern, dass die Sprechblase "Kennwort speichern" angezeigt wird, nachdem sich ein Benutzer angemeldet hat.

Autocomplete = off ist nicht die Antwort.

Ich habe keinen Beitrag gefunden, der eine sichere Lösung für dieses Problem bietet. Gibt es wirklich keine Möglichkeit, die Kennwortblase in Chrome zu deaktivieren?

36
Cognitronic

Ich fand, dass es keinen "unterstützten" Weg gibt, dies zu tun.

Was ich getan habe, war, den Passwortinhalt in ein verstecktes Feld zu kopieren und die Passworteingaben zu entfernen, BEVOR Sie ihn senden.

Da beim Senden keine Kennwörterfelder auf der Seite vorhanden sind, werden Sie vom Browser niemals aufgefordert, das Kennwort zu speichern.

Hier ist mein Javascript-Code (mit jquery):

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

Nach stundenlangem Suchen fand ich meine eigene Lösung, die in Chrome und Safari zu funktionieren scheint (allerdings nicht in Firefox oder Opera, und ich habe den IE nicht getestet). Der Trick besteht darin, das Passwortfeld mit zwei Dummy-Feldern zu umgeben.

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

Hier ist das von mir verwendete 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;
}

Hinweis: Die Dummy-Eingabefelder können mit display: none nicht mehr ausgeblendet werden, wie viele vorgeschlagen haben, da Browser dies erkennen und die ausgeblendeten Felder ignorieren, selbst wenn die Felder selbst nicht verborgen sind, sondern in einem verborgenen Wrapper eingeschlossen sind. Daher der Grund für die CSS-Klasse, die Eingabefelder im Wesentlichen unsichtbar und unklickbar macht, ohne sie zu "verbergen".

16
Vadim

Fügen Sie <input type="password" style="display:none"/> oben in Ihr Formular ein. Die automatische Vervollständigung von Chrome füllt die erste eingegebene Kennworteingabe und die Eingabe davor aus. Mit diesem Trick wird nur eine unsichtbare Eingabe eingefügt, die keine Rolle spielt.

4
erikkallen

Die beste Lösung ist, das Eingabepasswort mit dem Eingabetext zu simulieren, indem der Wert manuell durch Sternchen oder Punkte ersetzt wird.

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>

getestet in Firefox und Chrome funktioniert wie erwartet.

2
Ramakrishnan M

Ich habe keine Alternative mit allen Vorteilen gefunden, die ich brauche, also eine neue. 

HTML

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

jQuery (ersetzen Sie es durch Vanilla JS mit derselben Logik, wenn Sie jQuery nicht verwenden)

$('.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);
    //});
});

Leistungen:

  • Löst keine Eingabeaufforderung aus
  • Löst keine automatische Füllung aus (weder beim Laden der Seite noch beim Ändern des Typs)
  • Wirkt sich nur auf die tatsächlich verwendeten Eingänge aus (ermöglicht ungestörtes Klonen von Elementen in komplexen Umgebungen)
  • Auswahl nach Klasse
  • Einfach und zuverlässig (keine neuen Elemente, ggf. angefügte Js-Ereignisse)
  • Getestet und funktioniert ab heute mit Chrome 61, Firefox 55 und IE11
1
Alph.Dev

Meine eigene Lösung jQuery mit PrimeFaces. Getestete Arbeit in Chrome und Internet Explorer, aber in Mozilla Firefox (jedoch nicht in 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" />

Ich habe dies mit 2 normalen Textfeldern unterlaufen. Eines, das das eigentliche Passwort enthält, und eines, das als Maske fungiert. Dann setze ich die Deckkraft des Kennwortfelds auf 0 und das Maskentextfeld ist deaktiviert. Die Hintergrundfarbe ist jedoch auf Weiß gesetzt, sodass sie als aktiviert erscheint. Dann lege ich das Passwortfeld auf das Maskenfeld. In einer jscript-Funktion aktualisiere ich den Textwert der Maske, um bei jedem Tastendruck im Kennwortfeld eine Zeichenfolge mit '*' Zeichen anzuzeigen. Zwei Nachteile: Je nach Browser wird der blinkende Cursor jetzt angezeigt. Es zeigt sich im IE, aber nicht in Chrome oder Firefox. Es gibt eine gewisse Verzögerung, wenn der Benutzer gerade schreibt.

Mein Code-Snippet ist in 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

Das einzige, was für mich funktionierte, war, nach Eingabe des Dokuments ein Leerzeichen zum Eingabewert hinzuzufügen und dann das Leerzeichen zu löschen, wenn der Benutzer sich auf die Eingabe konzentrierte.

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

Simpel und einfach. Funktioniert auf Chrome 64. In Firefox müssen Sie nur autocomplete="off"-Attribut zur Eingabe hinzufügen.

0
Sevban Öztürk

Zuallererst möchte ich dir etwas sagen. Wenn du nimmst [input type="text"] und auch [input type="password"] Die gängigsten Browser bieten dafür ein Popup an.

Ersetzen Sie nun [input type="password"] bis [input type="text"] dann gibt es CSS dafür

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}
0
Jay Ponkia

Ich habe das mit dem folgenden Markup behandelt.

#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>

0
Prasanna Jathan

Ich hatte zwei Probleme mit der Art und Weise, wie Browser Ihr Kennwortverhalten erzwingen, wenn Sie auf einer Support-Only-Anmeldeseite auf einer regulären Seite arbeiten (das Support-Login sollte niemals gespeichert werden):

  1. Der Browser empfiehlt ein Login vom Rest der Seite, das im Weg ist.
  2. Der Browser fordert Sie auf, das eingegebene Tech-Passwort zu speichern.

Also kombinierte ich zwei Lösungen, die ich in verschiedenen stackoverflow-Posts gefunden hatte, und dachte, ich würde sie hier posten. Ich verwende jQuery, aber das Prinzip kann auch in normales JavaScript übersetzt werden.

Lassen Sie Ihr Kennwortfeld zunächst als Textfeld beginnen und es später durch JavaScript ändern. Dies bietet eine gute Chance, dass der Browser kein gespeichertes Kennwort anbietet.

Zweitens: Setzen Sie das Kennwortformular vor dem Senden des Formulars wieder auf ein Textfeld, blenden Sie es jedoch zuerst aus, damit das Kennwort nicht angezeigt wird. Dies könnte durch Hinzufügen eines weiteren Textfelds besser aussehen, wenn das Kennwortfeld ausgeblendet wird. Dies ist jedoch nur ein kosmetischer Aspekt.

<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>

Bei Firefox und Chrome funktionierte dies ab dem 9.12.2017.

0
semmelbroesel