टाइप = "पासवर्ड"

Question

के लिए एमडीएल के साथ क्रोम ऑटोफिल मैं वर्तमान में Google से एमडीएल (सामग्री डिजाइन लाइट) के साथ अपनी वेबसाइट पर काम कर रहा हूं और मुझे एक छोटी सी समस्या है।

आप देख सकते हैं, तारे अच्छा स्थान पर हैं लेकिन पासवर्ड यहाँ

मेरे कोड वास्तव में सरल है (वह कीबोर्ड पर किसी भी क्लिक या प्रेस के बाद बढ़ रहा है):

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

कोड सामान्य और मूल है। समस्या है, एमडीएल में (यहां लिंक करें: https://www.getmdl.io/components/index.html#textfields-section) पासवर्ड प्रकार के लिए कुछ भी नहीं है, इसलिए मुझे हमेशा पहले से समस्या मिली है।

मैं अपने क्लाइंट के लिए क्रोम ऑटोफिल रखना चाहता हूं, इसलिए यह एक विकल्प नहीं है। क्या इस समस्या को बदलने का कोई तरीका है?

धन्यवाद!

Answer 1

एचटीएमएल

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

सीएसएस फिक्स

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

बदलें रंग और शायद पिक्सल आपकी आवश्यकताओं के अनुरूप ऑफसेट

---

JQuery समाधान है कि काम करता है जब प्रकार नहीं है " पासवर्ड "

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

---

ऑटोफिल का पता चला है तो इनपुट क्षेत्र पर ध्यान केंद्रित करने के लिए एक और jquery वर्कअराउंड है। आप दोनों पाठ और पासवर्ड फ़ील्ड के लिए .ready

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

यह अच्छा नहीं है, यह साफ नहीं है लेकिन यह काम करता है। यह समाधान आईडी पर निर्भर करता है

$(document).ready(function() { 

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

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

आप पासवर्ड की लंबाई की जाँच करने के लिए प्रयास करें, तो यह हमेशा 0 ताकि आप के बजाय उपयोगकर्ता नाम क्षेत्र की लंबाई की जांच कर सकते हैं (यदि यह भरा हुआ है यह कर्सर के लिए एक खुशी होगी देना होगा यहां तक ​​कि अगर कोई पासवर्ड नहीं है)।

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

वर्क्स इस अंदर $ (दस्तावेज़) रखना चाहिए। एक नकारात्मक बात यह है कि पासवर्ड फ़ील्ड हमेशा गंदे, खाली या नहीं के रूप में चिह्नित किए जाएंगे।