एचटीएमएल: पासवर्ड फ़ील्ड समस्या में एचटीएमएल 5 प्लेसहोल्डर विशेषता- सामान्य पाठ दिखाता है?

Question

मैं एक लॉग इन प्रपत्र बनाने रहा हूँ, जिसमें दो fields-

सरलीकृत कर रहे हैं:

<input type="text"> 
<input type="password" placeholder="1234567" > 

मेरी परीक्षण (एफएफ, क्रोम) placeholer ग्रे पाठ से पता चलता है। पासवर्ड 'डॉट्स' में प्लेसहोल्डर टेक्स्ट कैसे हो सकता है? और आईई में प्लेसहोल्डर समर्थन है?

उदाहरण के लिए। उपयोगकर्ता एक नकली ग्रे पासवर्ड, नहीं पाठ देखता है 1233467.

(मैं jQuery उपलब्ध है)

ठनक बहुत ज्यादा,

हार्ले

संपादित करें: ऐसा लगता है कि यह गलत है प्लेसहोल्डर का उपयोग करने का तरीका। हालांकि, मैं आईई समर्थन कैसे प्राप्त कर सकता हूं? धन्यवाद

Answer 1

तो जैसे प्लेसहोल्डर में पासवर्ड डॉट कोड का उपयोग कर प्रयास करें:

placeholder="●●●●●" 

आईई में समर्थन के लिए कृपया Showing Placeholder text for password field in IE याजैसे अन्य थ्रेड देखें

Answer 2

भले ही मैं एक यूएक्स दृष्टिकोण से इसके खिलाफ हूं, मैं इसके लिए उत्तर प्रदान करूंगा।

HTML5 विशेषता placeholder का उपयोग करने के बजाय, value का उपयोग करें।

<input type="password" value="1234567"> 

फिर focus पर, कोई रिक्त स्ट्रिंग के साथ value बदलें।

var inputs = document.getElementsByTagName('input'), 
    i = 0; 
for (i = inputs.length; i--;) { 
    listenerForI(i); 
} 

function listenerForI(i) { 
    var input = inputs[i], 
     type = input.getAttribute('type'), 
     val = input.value; 
    if (type === 'password') { 
    input.addEventListener('focus', function() { 
     if (input.value === val) input.value = ''; 
    }); 
    input.addEventListener('blur', function() { 
     if (input.value === '') input.value = val; 
    }); 
    } 
} 

मैं दोहराना चाहता हूं कि मैं इस दृष्टिकोण की अनुशंसा नहीं करता हूं, लेकिन यह वही करेगा जो आप खोज रहे हैं।

संपादित करें:

कृपया इस पृष्ठ जो placeholder कार्यक्षमता की नकल करेगा कि क्या यह jQuery का उपयोग कर अपने ब्राउज़र द्वारा समर्थित नहीं है पर जाएँ: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

Answer 3

अपने अपडेट किए गए सवाल,

मैं this धागा में दिए गए जवाब के बंद का निर्माण कर रहा हूँ उत्तर देने के लिए।

एक अवधि तत्व में अपना फॉर्म लपेटें। फिर आप पासवर्ड फ़ील्ड पर प्लेसहोल्डर के रूप में एक लेबल जोड़ सकते हैं। अंत में, जब पासवर्ड टाइप किया जाता है तो लेबल को निकालने के लिए, पासवर्ड फ़ील्ड की कीप्रेस पर बाध्य करें और लेबल से टेक्स्ट हटा दें। यहां कोड का एक उदाहरण दिया गया है, आप शायद ids:

<span style="position: relative;"> 
<input id="password" type="password" placeholder="Password" > 
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label> 
</span> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#password').keypress(function(){ 
      $('#placeholder').html(""); 
     }); 
    }); 
</script>