Riempimento automatico Chrome con MDL per type = "password"

Question

Attualmente sto lavorando al mio sito Web con MDL (Material Design Lite) da Google e ho un piccolo problema.

Come si può vedere, le stelle sono in buon posto ma la password stare qui (che si muove dopo ogni click o premere sulla tastiera)

Il mio codice è molto semplice:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" name="mail"> 
    <label class="mdl-textfield__label">Adresse Email</label> 
</div> 
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input id="test" class="mdl-textfield__input" type="password" name="password"> 
    <label class="mdl-textfield__label">Password</label> 
</div> 

Il codice è normale e di base. Il problema è, in MDL (Link qui: https://www.getmdl.io/components/index.html#textfields-section) non c'è nulla per il tipo di password, quindi ho sempre avuto il problema da prima.

Voglio mantenere il riempimento automatico del cromo per il mio cliente, quindi disabilitato non è un'opzione. C'è un modo per cambiare questo problema?

Grazie!

Answer 1

HTML

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="password" id="password" required name="password"> 
    <label class="mdl-textfield__label" for="password"></label> 
</div> 

CSS Fix

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label { 
    transform: translate3d(0, -20px, 0); 
    visibility: hidden; 
} 

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label:after { 
    content: 'Password'; 
    visibility: visible; 
    left: 0; 
    transform: translate3d(0, -20px, 0); 
    background: transparent; 
    color: inherit; 
} 

cambiare il colore e forse l'offset in base alle proprie esigenze px

---

soluzione JQuery che funziona quando il tipo non è " password "

$.each($('.mdl-textfield__input'), function() { 
    $(this).parent().get(0).MaterialTextfield.checkDirty(); 
    }); 

---

Un'altra soluzione jquery consiste nel forzare l'attivazione del campo di input se viene rilevata la compilazione automatica. Si dovrebbe mettere questo all'interno di $ (document) .ready

setTimeout(function() { 
    try { if ($('#password:-webkit-autofill').length > 0) $('#password').focus(); } 
    catch (error) { console.log(error); } 
    }, 25); 

Answer 2

utilizzare for='id' nelle etichette?

<label class="mdl-textfield__label" for='test'>Password</label> 

Answer 3

Non va bene, non è pulito ma funziona. Questa soluzione si basa su ids

$(document).ready(function() { 

    setTimeout(function(){ 
     $("#password").focus(); 
     componentHandler.upgradeDom(); 

     if($("#username").val().length === 0) { 
      $("#password").blur(); 
      componentHandler.upgradeDom(); 
     } 
    },100); 
}); 

Se si tenta di controllare la lunghezza della password, sarebbe sempre dare 0 in modo da poter verificare la lunghezza del campo nome utente invece (se è pieno, sarebbe un piacere avere il cursore lì anche se non c'è password).

Answer 4

setTimeout(function() { 
    $.each($('.mdl-textfield'), function() { 
    var input = $(this).find("input"); 
    var len = input.val().length; 
    var type = input.attr("type"); 

    if (len > 0 || type == "password") 
     $(this).addClass("is-dirty"); 
    }); 
}, 100); 

funziona sia per i campi di testo e password. Uno svantaggio è che i campi della password saranno sempre contrassegnati come sporchi, vuoti o meno.