password - ¿Cómo desactivo la burbuja de guardar contraseña en Chrome usando Javascript?

evitar recordar contraseña html

Question

Necesito poder evitar que la burbuja Guardar contraseña se muestre incluso después de que un usuario inicie sesión.

Autocompletar = apagado no es la respuesta.

No he encontrado una publicación que ofrezca una solución segura para este problema. ¿Realmente no hay forma de desactivar la burbuja de contraseña en Chrome?

Answer 1

Agregue <input type="password" style="display:none"/> en la parte superior de su formulario. La función Autocompletar de Chrome completará la primera entrada de contraseña que encuentre, y la entrada anterior, de modo que con este truco solo completará una entrada invisible que no importa.

Answer 2

Antes que nada, quiero decirte algo. Cuando toma [input type="text"] y también [input type="password"] principales navegadores le dan una ventana emergente para eso.

Ahora, reemplace [input type="password"] por [input type="text"] luego hay css para eso

#yourPassTextBoxId{
-webkit-text-secutiry:disc
}

Answer 3

Descubrí que no hay una manera "compatible" de hacerlo.

Lo que hice fue copiar el contenido de la contraseña en un campo oculto y eliminar las entradas de contraseña ANTES de enviar.

Dado que no hay campos de contraseñas en la página cuando se produce la entrega, el navegador nunca solicita guardarla.

Aquí está mi código javascript (usando jquery):

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

Answer 4

Después de horas de búsqueda, se me ocurrió mi propia solución, que parece funcionar en Chrome y Safari (aunque no en Firefox u Opera, y no he probado IE) . El truco es rodear el campo de contraseña con dos campos ficticios.

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

Aquí está el CSS que utilicé:

.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;
}

Nota: Los campos de entrada ficticios ya no se pueden ocultar con la display: none como muchos han sugerido, porque los navegadores lo detectan e ignoran los campos ocultos, incluso si los campos no están ocultos, sino que están encerrados en un contenedor oculto. Por lo tanto, el motivo de la clase CSS que esencialmente hace que los campos de entrada sean invisibles e imposibles de cliquear sin "ocultarlos".

Answer 5

La mejor solución es simular la contraseña de entrada con texto de entrada reemplazando el valor con asteriscos o puntos manualmente.

Answer 6

Lo único que funcionó para mí fue agregar un espacio al valor de entrada después de que el documento estuviera listo y luego eliminar el espacio cuando el usuario se centró en la entrada.

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

Simple y fácil. Funciona en Chrome 64. En Firefox, todo lo que necesita es agregar el atributo autocomplete="off" a la entrada.

Answer 7

Mi propia solución jQuery con PrimeFaces. Trabajo probado en Chrome e Internet Explorer pero en mozilla firefox (aunque no en 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" />

Answer 8

No encontré ninguna alternativa con todos los beneficios que necesito, así que creé uno nuevo.

HTML

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

jQuery (reemplace con JS vainilla con la misma lógica si no usa jQuery)

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

Beneficios:

• No desencadena el aviso
• No activa el autocompletar (no en la carga de la página ni en el cambio de tipo)
• Solo afecta las entradas que realmente se usan (lo que permite la clonación / modelado de elementos no alterados en entornos complejos)
• Selector por clase
• Simple y confiable (sin elementos nuevos, mantiene eventos js adjuntos, si corresponde)
• Probado y funciona en los últimos Chrome 61, Firefox 55 e IE11 a partir de hoy

Answer 9

Si decide dejar que Google Chrome guarde las contraseñas del sitio web, verá un aviso cada vez que inicie sesión en un nuevo sitio web. Si hace clic en Nunca para este sitio en el aviso, su contraseña para el sitio no se guarda y el sitio se agrega a una lista de contraseñas que nunca se guardan.

Puede editar esta lista Y DESACTIVAR LA PRONTA:

Haga clic en el menú de Chrome Menú de Chrome en la barra de herramientas del navegador. Seleccione Configuraciones Haga clic en Mostrar configuración avanzada. Haz clic en Administrar contraseñas guardadas. En el cuadro de diálogo Contraseñas que aparece, desplácese hacia abajo a la sección "Nunca guardado" en la parte inferior. Para eliminar un sitio de esta lista, selecciónelo y haga clic en la X que aparece al final de la fila. Ahora vuelve a visitar el sitio web y deberías ver el mensaje para guardar la información de tu contraseña nuevamente, si permites que Google Chrome muestre el mensaje.

Answer 10

Subvertí esto usando 2 cuadros de texto regulares. Uno para contener la contraseña real y otra para funcionar como una máscara. Luego configuro la opacidad del cuadro de contraseña en 0 y el cuadro de texto de máscara está deshabilitado, pero el color de fondo está establecido en blanco, lo que hace que parezca habilitado. Luego coloco el cuadro de contraseña en la parte superior del cuadro de máscara. En una función jscript, actualizo el valor de texto de la máscara para mostrar una cadena de caracteres "*" con cada pulsación de tecla en el cuadro de contraseña. Dos inconvenientes: el cursor parpadeante ahora podría mostrarse dependiendo de su navegador. Se muestra en IE, pero no en Chrome o Firefox. Hay un poco de retraso mientras el usuario escribe.

Mi fragmento de código está en 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" />

Answer 11

Tuve dos problemas con la forma en que los navegadores fuerzan su comportamiento de contraseña cuando trabaja en una página de inicio de sesión de solo soporte dentro de una página normal (el inicio de sesión de soporte nunca se debe guardar):

1. El navegador recomendará un inicio de sesión del resto de la página que se interponga en el camino.
2. El navegador pedirá guardar la contraseña de tecnología introducida.

Así que combiné dos soluciones que encontré en varias publicaciones de y pensé que las publicaría aquí. Estoy usando jQuery, pero el principio también se puede traducir al JavaScript normal.

Primero, haga que su campo de contraseña comience como un campo de texto y que JavaScript lo cambie más adelante; esto da una buena posibilidad de que el navegador no ofrezca una contraseña guardada.

En segundo lugar, justo antes de enviar el formulario, configure el formulario de contraseña nuevamente para que sea un campo de texto, pero escóndalo primero para que no se pueda ver la contraseña. Esto podría hacerse más bonita al agregar otro campo de texto cuando desaparezca el campo de contraseña, pero eso es solo cosmético.

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

Esto funcionó para mí en Firefox y Chrome a partir del 12/09/2017.

Answer 12

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

probado en Firefox y Chrome trabajando como se esperaba