Chrome auto-complete with MDL for type = "password"

Question

I am currently working on my site using MDL (Material Design Lite) from Google, and I have a little problem.

As you can see, the stars are in a good place, but the password remains here (it moves after any keystroke or keystroke).

My code is very simple:

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

The code is regular and basic. The problem is that in MDL (link here: https://www.getmdl.io/components/index.html#textfields-section ) there is nothing for the password type, so I always got the problem before.

I want chrome autofill for my client to be disabled, this is not an option. Is there any way to change this problem?

Thanks!

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

Change the color and possibly px offset according to your needs

---

A jQuery solution that works when the type is not a "password"

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

---

Another way to bypass jquery is to force focus on the input field if autocomplete is detected. You should put this inside $ (document) .ready

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

Answer 2

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

Works for both text and password fields. One of the drawbacks is that password fields will always be marked as dirty, empty or not.

Answer 3

use for='id' in your shortcuts?

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

Answer 4

This is not good, it is not clean, but it works. This decision is identifier dependent.

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

If you try to check the length of the password, it will always give 0 so that you can instead check the length of the username field (if it was completed, it would be nice to have a cursor there, even if there is no password).