html - password - input autocomplete javascript

autocomplete=''off'' no funciona cuando el tipo de entrada es password y hace que el campo de entrada de arriba para habilitar autocompletar

Question

Tengo un formulario con autocompletado deshabilitado pero no funciona y hace que el autocompletado se habilite en Firefox y en una versión superior de 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>

Cuando se cambia el tipo de contraseña a texto, funciona en todos los navegadores. ¿Alguien puede ayudar a resolver este problema?

Answer 1

¿Por qué no todos usan esto ...

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

Es tan simple... :)

Answer 2

Acabo de encontrar otra solución simple y me funcionó en los 3 navegadores principales Chrome Firefox y Opera

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

Answer 3

Agregar autocomplete="off" no lo cortará, Chrome lo ignora.

Cambiar el atributo de tipo de entrada a type="search"
Google no aplica el relleno automático a las entradas con un tipo de búsqueda.

Answer 4

Aquí hay un hack que parece funcionar en Firefox y Chrome.

En Firefox, tener un campo de texto deshabilitado justo antes del campo de la contraseña parece hacer el truco, incluso si está oculto (deshabilitado: ninguno)

En Chrome, tiene que ser visible sin embargo.

Así que sugiero algo como esto:

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

Answer 5

Cuando enfrenté el mismo problema, lo resolví creando un cuadro de texto temporal sobre el campo de contraseña y ocultándolo

Me gusta esto,

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

Hará que el campo de texto del username no muestre ninguna palabra escrita previamente en un menú desplegable. Como no hay ningún atributo como name , id para el campo de entrada <input type="text" style="display:none;"> tampoco enviaría ningún parámetro adicional.

No estoy seguro de que esta sea una buena práctica, pero resolverá el problema.

Answer 6

Descubrí que si la entrada no tiene nombre (p. Ej., El atributo de nombre no está establecido), el navegador no puede completar el campo automáticamente. Sé que esto no es una solución para todos, pero si envía su formulario a través de AJAX, puede intentar esto.

Answer 7

El navegador normalmente tiene dos características relacionadas pero diferentes relacionadas con los formularios:

• El formulario se completa automáticamente, donde los elementos de <input type="text"> (y similares) recopilan valores escritos y los ofrecen de nuevo en forma de lista desplegable.
  (Es una característica simple que funciona bastante bien).

• Administrador de contraseñas, donde el navegador le pide que recuerde las combinaciones de nombre de usuario y contraseña cuando detecta que ha enviado un formulario de inicio de sesión. Al volver al sitio, la mayoría de los navegadores muestran los nombres de usuario disponibles en un cuadro desplegable (Firefox, Chrome, Internet Explorer ...) pero algunos tienen un botón de la barra de herramientas (Opera). Además, Chrome resalta los campos en amarillo codificado.
  (Esto depende de las heurísticas y puede fallar en ciertas páginas).

Hay un caso de borde con formularios etiquetados como autocomplete="off" . ¿Qué sucede si se trata de un formulario de inicio de sesión y el usuario ha almacenado previamente un nombre de usuario / contraseña? En realidad, eliminar la contraseña de la base de datos local parece inadecuado, por lo que probablemente ningún navegador lo haga. (De hecho, los datos del formulario de autocompletado tampoco se borran). Firefox decide darle poder al usuario: usted tiene una contraseña, así que le dejaré usarla. Chrome decide darle poder al sitio.

Answer 8

He intentado todo tipo de soluciones, pero solo esa combinación funcionó en todos los navegadores en mi caso:

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

Y es una solución bastante limpia también :)

Answer 9

Intente configurar autocompletar = "nueva-contraseña" como se muestra a continuación:

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

Answer 10

Lo que funcionó para mí, fue usar autocomplete = "nueva-contraseña" solo en el tipo de entrada = "contraseña", así:

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

Independientemente de cuántas entradas tenga la forma.

Answer 11

Mi sol

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

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

Answer 12

Mi solución inspirada aquí es la siguiente:

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

Seguro que es feo, se siente fuera de lugar en 2017, pero funciona y protege el campo de nombre de usuario y contraseña del autocompletado. Tenga en cuenta que en Firefox (versión 51 en el momento de la escritura) no importa en absoluto qué combinación de name , id o autocomplete se use, ya sea en los campos de formulario o de entrada. Sin los dos primeros campos ficticios, el autocompletar se realizará en cualquier momento en que el dominio coincida y arruinará su día.

Answer 13

Para el tipo de texto use autocomplete="off" o autocomplete="false"

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

Para el tipo de contraseña use autocomplete="new-password"

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

Answer 14

Para la contraseña, no está funcionando actualmente.

Entonces, de forma predeterminada, haga que el campo de la contraseña sea texto y use el siguiente código js.

$(''#real-password'').on(''input'', function(){
            if ($(this).val() !== '''') {
                $(this).attr(''type'', ''password'');
            } else {
                $(this).attr(''type'', ''text'');
            }
   });

Answer 15

Recientemente enfrenté este problema y no tengo una solución simple, ya que mis campos se pueden rellenar previamente. Quería compartir un truco elegante que se me ocurrió configurando el tipo de contraseña en el evento listo.

No declare su campo de entrada como contraseña de tipo al crearlo, pero agregue un detector de eventos listo para agregarlo por usted con jQuery:

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

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

Answer 16

Sé que esta es una pregunta antigua, pero los navegadores han ido cambiando con el tiempo. Aunque algunas de las answers a esta pregunta que se mencionan aquí son: crear un cuadro de texto temporal sobre el campo de la contraseña y ocultarlo puede haber funcionado en el pasado, actualmente la forma más fácil de evitar que el navegador abra el administrador de contraseñas es tener al menos tres entradas de contraseña ocultas adicionales separadas, cada una con diferentes valores ficticios, así:

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

Answer 17

Simplemente agregue el atributo autocomplete="new-password" a su campo de entrada de contraseña.

Para obtener más información sobre autocomplete : https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

Answer 18

Solo puede hacer que el campo sea de solo lectura mientras se carga el formulario. Mientras el campo se enfoca, puedes cambiar ese campo para que sea editable. Esta es la forma más sencilla de evitar el auto completado

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

Answer 19

autocomplete=off se ignora en gran medida en los navegadores modernos, principalmente debido a los administradores de contraseñas, etc.

Puede intentar agregar este autocomplete="new-password" que no es totalmente compatible con todos los navegadores, pero funciona en algunos

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

Answer 20

Esto evitará el llenado automático de la contraseña en el campo de entrada (tipo = "contraseña").

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

Answer 21

<input type="password" placeholder="Enter Password" class="form-control" autocomplete="new-password">

Aqui tienes.