タイプ= "パスワード"のMDLを使用したChromeの自動入力

Question

現在、GoogleのMDL（Material Design Lite）を使用してウェブサイトで作業していますが、少し問題があります。

あなたが見ることができるように、星が良い場所にあるが、パスワードはここに滞在（彼は、キーボード上の任意のクリックやキーを押した後に移動している）

私のコードは本当に簡単です：

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

コードは通常のものと基本的なものです。問題は、MDL（ここにリンク：https://www.getmdl.io/components/index.html#textfields-section）にはパスワードタイプが何もないので、私はいつも以前から問題がある。

クライアントのクローム自動入力をそのまま使用したいので、無効にすることはできません。この問題を解決する方法はありますか？

ありがとうございます！

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

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

色を変更し、ニーズに合わせてオフセット多分PX

---

タイプでない場合は動作します

jQueryのソリューション "パスワード "

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

---

もう1つのjqueryの回避策は、自動入力が検出された場合に入力フィールドにフォーカスを強制することです。あなたは両方のテキストとパスワードのフィールドに

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

Answer 2

ラベルにはfor='id'を使用してください。

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

Answer 3

いいえ、きれいではありませんが動作します。このソリューションは、（それがいっぱいだ場合、カーソルを持っている喜びとなり、パスワードの長さをチェックしようとした場合、それはいつもあなたの代わりに、ユーザー名フィールドの長さを確認することができます0を与えるだろうIDS

$(document).ready(function() { 

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

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

に依存していますパスワードがない場合でもそこにあります）。

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

作品.readyこの内部の$（文書）を置く必要があります。 1つの欠点は、パスワードフィールドが常に汚い、空であるかどうかを示すことです。